@import url("https://use.typekit.net/mrj7uyb.css");

/* common styles placeholder */

:root {
	--body-font: 'freight-sans-pro', sans-serif;
	--display-font: 'freight-display-pro', sans-serif;
	--block-border-radius: 1em;
	--code-bg-color: #1a1a2e;
	--code-text-color: #e0e0e0;
	--code-heading-color: #1472bd;
	--example-bg-color: white;
	--body-text-color: #333;
	--root-font-size: 1cqw;
	--body-font-weight: 500;
	--display-font-weight: 900;
	--quote-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	--block-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	--demo-large-font: 1.6rem;
}

@view-transition {
  navigation: auto;
}

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        	font-family: var(--body-font);
			font-weight: var(--body-font-weight);
            line-height: 1.6;
            color: var(--body-text-color);
            overflow: hidden;
            font-size: var(--root-font-size)
        }
        
        h1, h2, h3, h4, h5, h6 {
        	font-weight: var(--display-font-weight);
        	font-family: var(--display-font);

        }

		blockquote {
			font-family: var(--display-font);
		}

        .slides-container {
            height: 100vh;
            overflow-y: scroll;
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth;
        }

        .slide {
    		min-height: calc(100vh - 2rem);
			display: flex;
            flex-direction: column;
            justify-content: center;
/* 			justify-content: flex-start; */
            align-items: center;
            padding: 1rem;
            scroll-snap-align: start;
            position: relative;
        }
        
        .slide > header {
        	display: flex;
			align-items: center;
			justify-content: space-around;
			width: 80%
        }
        
        .slide > header > * {
        	height: 3rem
        }
        

        /* Quote Slide */
        
        body.quote-slide {
            background-image: var(--quote-gradient);
        }
        .quote-slide {
            color: #fff;
			justify-content: center;
        }
        

        .quote-slide h1 {
            font-size: 3rem;
            margin-bottom:3rem;
            text-align: center;
            letter-spacing: 0.1em;
        }
    
        .quote {
            font-size: 2rem;
            max-width: 800px;
            text-align: center;
            font-style: italic;
            line-height: 1.8;
            opacity: 0.9;
        }
        
        div.quote {
        	font-style: normal;
        }

        .quote-source {
            margin-top: 2rem;
            font-size: 1.8rem;
            opacity: 0.7;
        }

        /* Example Slides */
        .example-slide {
            background: #f8f9fa;
            width: 100%
        }
        
        .example-slide h1 {
			font-size: 2rem;
			margin-bottom: 1rem;
        }

        .example-slide h2 {
            font-size: 2.5rem;
            margin-bottom: 2rem;
            color: #1a1a2e;
        }

        .example-content {
            display: flex;
            gap: 3rem;
/*             max-width: 90%; */
            width: 100%;
		    align-items: stretch;
        }

        .code-section {
			display: flex;
            flex: 1;
            padding: 0rem;
            border-radius: var(--block-border-radius);
			background: var(--example-bg-color);
			box-shadow: var(--block-box-shadow);
            overflow-x: auto;
        }
        
        .code-section pre {
        	padding: 2cqw;
			font-size: 1.2rem;
			background: var(--code-bg-color);
			border-radius: var(--block-border-radius);
            color: var(--code-text-color);
            font-family: 'Consolas', 'Monaco', monospace;
            line-height: 1.5;
            flex: 1;
        }

        .code-section h3 {
        	display: none;
            color: var(--code-heading-color);
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }


        .demo-section {
            flex: 1;
            font-size: 1.3rem;
            padding: 2rem;
            background: var(--example-bg-color);
			border-radius: var(--block-border-radius);
            box-shadow: var(--block-box-shadow);
            display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
}

        .principle-note {
        	display: none;
            position: absolute;
            bottom: 2rem;
            right: 2rem;
            font-size: 0.9rem;
            color: #666;
            font-style: italic;
        }
        
/* 
        footer {
        	opacity: 0;
        	position: fixed;
        	bottom: 0;
        	width: 100%;
        	left: 0;
        	text-align: center;
        	transition: opacity .3s;
        }
        
        footer:hover {
        	opacity: 1;
        }
 */
 
 
         footer {
            margin-top: 3rem;
            padding: 1.5rem 0;
        	position: fixed;
        	bottom: 0;
        	width: 100%;
        	left: 0;
        	text-align: center;

        }

        nav {
            text-align: center;
            font-size: 0.875rem;
            background: white;
            padding: 1rem 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            border: 1px solid #e2e8f0;
            max-width: 400px;
            margin: 0 auto;
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        footer:hover nav, footer nav {
            opacity: 1;
            transform: scale(1);
        }

        nav a {
            color: #64748b;
            text-decoration: none;
            transition: all 0.3s ease;
            padding: 0.5rem 0.75rem;
            border-radius: 6px;
            display: inline-block;
            font-weight: 500;
        }

        nav a:hover {
            color: #1e293b;
            background: #f1f5f9;
        }

        nav a[data-prev]:hover {
            background: linear-gradient(135deg, #dcfce7, #bbf7d0);
            color: #166534;
        }

        nav a[data-next]:hover {
            background: linear-gradient(135deg, #dbeafe, #bfdbfe);
            color: #1d4ed8;
        }

        /* Separator styling */
        nav {
            letter-spacing: 0.05em;
        }

        /* Demo Styles */
        
        .demo-section:has(.dark-mode-demo) {
			display: flex;
			align-items: center;

        }
        
        .dark-mode-demo {
            padding: 2rem;
            font-size: var(--demo-large-font);
			border-radius: var(--block-border-radius);
            transition: all 0.6s ease;
        }
        
        .dark-mode-demo p {
        	margin-block-end: 1em;
        }

        .dark-mode-toggle {
            display: block;
            margin: 0 auto 1rem;
            padding: 0.5rem 1rem;
            cursor: pointer;
            border: none;
            border-radius: 4px;
            background: #1a1a2e;
            color: white;
            font-size: 1rem;
        }

        .dark {
            background: #1a1a2e;
            color: #e0e0e0;
        }

        .typography-demo {
            font-size: calc(1rem + 0.5vw);
            line-height: 1.6;
            max-width: 500px;
        }
        
        #remDemo {
        	transition: font-size .2s;
        }
        
        #fontSizeSlider {
        	display: none;
        }

        .native-controls-demo form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-width: 400px;
        }

        .native-controls-demo input,
        .native-controls-demo select,
        .native-controls-demo button {
            padding: 0.5rem;
            font-size: 1rem;
            border-radius: 4px;
            border: 1px solid #ccc;
        }

        .native-controls-demo button {
            background: #1a1a2e;
            color: white;
            cursor: pointer;
            border: none;
        }

        .polished-select:focus {
            outline: none;
            border-color: #4a90e2;
        }

        .polished-select:hover {
            border-color: #c0c0c0;
        }

        select.styled-select:focus {
            outline: 2px solid #0a7;
            outline-offset: 2px;
            border-color: #0a7;
        }

        /* Navigation hints */
        .nav-hint {
            position: fixed;
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.8rem;
            color: #666;
            animation: float 2s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(-10px); }
        }

        .code-comment {
            color: #c9c9c9;
        }

        .code-property {
            color: #64b5f6;
        }

        .code-value {
            color: #a5d6a7;
        }
    

/* form demo */

        .form-demo {
            max-width: 400px;
            margin: 0 auto;
        }

        .form-demo form {
            padding: 1.5rem;
            border: 3px solid transparent;
			border-radius: var(--block-border-radius);
            transition: all 0.3s ease;
            background: #f9f9f9;
        }

        .form-demo input {
            width: 100%;
            padding: 0.5rem;
            margin-bottom: 1rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }

        .form-demo button {
            background: #0a7;
            color: white;
            border: none;
            padding: 0.5rem 1.5rem;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
        }

        /* Modern CSS reactivity */
        .reactive-form:has(:invalid:not(:placeholder-shown)) {
            border-color: #e91e63;
            background: #fef0f3;
        }

        .reactive-form:has(:valid) {
            border-color: #0a7;
            background: #f0fdf4;
        }

        .reactive-form:has(:focus) {
            box-shadow: 0 0 0 3px rgba(10, 170, 119, 0.2);
        }



/* brand colors */

.theme-demo * {
	transition: all .5s
}

/* View transitions for example slides */
.example-slide header {
    view-transition-name: example-header;
}

.code-section {
    view-transition-name: code-block;
}

.demo-section {
    view-transition-name: demo-area;
}

.principle-note {
    view-transition-name: principle-note;
}

/* Example slide transition animations */
::view-transition-old(example-header) {
    animation: headerSlideOut 0.4s ease-out;
}

::view-transition-new(example-header) {
    animation: headerSlideIn 0.5s ease-out;
}

::view-transition-old(code-block) {
    animation: codeSlideOut 0.5s ease-in-out;
}

::view-transition-new(code-block) {
    animation: codeSlideIn 0.6s ease-out 0.1s both;
}

::view-transition-old(demo-area) {
    animation: demoFadeOut 0.4s ease-in;
}

::view-transition-new(demo-area) {
    animation: demoFadeIn 0.6s ease-out 0.15s both;
}

::view-transition-old(principle-note) {
    animation: noteSlideOut 0.3s ease-in;
}

::view-transition-new(principle-note) {
    animation: noteSlideIn 0.5s ease-out 0.2s both;
}

/* Keyframes for example slides */
@keyframes headerSlideOut {
    to {
        transform: translateY(-12px);
        opacity: 0;
    }
}

@keyframes headerSlideIn {
    from {
        transform: translateY(12px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes codeSlideOut {
    to {
        transform: translateX(-20px) scale(0.96);
        opacity: 0;
    }
}

@keyframes codeSlideIn {
    from {
        transform: translateX(20px) scale(1.02);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes demoFadeOut {
    to {
        transform: scale(0.94);
        opacity: 0;
    }
}

@keyframes demoFadeIn {
    from {
        transform: scale(1.04);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes noteSlideOut {
    to {
        transform: translateY(8px);
        opacity: 0;
    }
}

@keyframes noteSlideIn {
    from {
        transform: translateY(-8px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Prepare elements for smooth transitions */
.example-slide header,
.code-section,
.demo-section,
.principle-note {
    will-change: transform, opacity;
}

/* Fix post-transition flash for example slides */
::view-transition-old(example-header) {
    animation: headerSlideOut 0.4s ease-out forwards;
}

::view-transition-new(example-header) {
    animation: headerSlideIn 0.5s ease-out backwards;
}

::view-transition-old(code-block) {
    animation: codeSlideOut 0.5s ease-in-out forwards;
}

::view-transition-new(code-block) {
    animation: codeSlideIn 0.6s ease-out 0.1s both;
}

::view-transition-old(demo-area) {
    animation: demoFadeOut 0.4s ease-in forwards;
}

::view-transition-new(demo-area) {
    animation: demoFadeIn 0.6s ease-out 0.15s both;
}

::view-transition-old(principle-note) {
    animation: noteSlideOut 0.3s ease-in forwards;
}

::view-transition-new(principle-note) {
    animation: noteSlideIn 0.5s ease-out 0.2s both;
}