/* ================================================================
   OCTO WEB STUDIO — Cases page
   European minimalism · "modest charm of the bourgeoisie"
   ================================================================ */

/* ─── Reset & base ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    /* Light theme */
    --bg:#f6f3ee;
    --bg-alt:#ede8e0;
    --surface:#ffffff;
    --text:#2a2a2a;
    --text-mute:#7a766e;
    --accent:#8a7352;
    --accent-soft:rgba(138,115,82,.12);
    --border:rgba(42,42,42,.10);
    --browser-bar:#e8e3db;
    --shadow:0 20px 60px rgba(0,0,0,.08);
    --shadow-hover:0 30px 80px rgba(0,0,0,.12);
}

[data-theme="dark"]{
    --bg:#1a1a1c;
    --bg-alt:#232326;
    --surface:#27272a;
    --text:#e4e0d9;
    --text-mute:#8b8780;
    --accent:#c4a875;
    --accent-soft:rgba(196,168,117,.14);
    --border:rgba(228,224,217,.10);
    --browser-bar:#2e2e31;
    --shadow:0 20px 60px rgba(0,0,0,.30);
    --shadow-hover:0 30px 80px rgba(0,0,0,.40);
}

html{scroll-behavior:smooth;font-size:16px}

body{
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    transition:background .4s ease,color .4s ease;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ─── Header ─── */
.header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 40px;
    background:rgba(246,243,238,.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    transition:background .4s ease;
}
[data-theme="dark"] .header{background:rgba(26,26,28,.85)}

.header__logo{display:flex;align-items:center;gap:10px}
.header__logo-mark{
    display:inline-flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:50%;
    background:var(--accent);color:#fff;
    font-family:'Playfair Display',serif;font-size:18px;font-weight:500;
}
.header__logo-text{
    font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
}
.header__logo-text em{font-weight:300;color:var(--text-mute);font-style:italic;text-transform:none;letter-spacing:0}

.header__nav{display:flex;gap:28px}
.header__nav a{font-size:14px;color:var(--text-mute);transition:color .2s}
.header__nav a:hover{color:var(--text)}

/* Theme toggle */
.theme-toggle{
    position:relative;width:40px;height:40px;border-radius:50%;
    border:1px solid var(--border);background:transparent;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--text);
    transition:border-color .2s,background .2s;
}
.theme-toggle:hover{border-color:var(--accent);background:var(--accent-soft)}
.theme-toggle__icon{position:absolute;width:18px;height:18px;transition:opacity .3s,transform .3s}
.theme-toggle__icon--sun{opacity:0;transform:rotate(-90deg) scale(.6)}
.theme-toggle__icon--moon{opacity:1;transform:rotate(0) scale(1)}
[data-theme="dark"] .theme-toggle__icon--sun{opacity:1;transform:rotate(0) scale(1)}
[data-theme="dark"] .theme-toggle__icon--moon{opacity:0;transform:rotate(90deg) scale(.6)}

/* ─── Intro ─── */
.intro{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    padding:0 40px;text-align:center;
}
.intro__inner{max-width:760px}
.intro__eyebrow{
    font-size:13px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--accent);margin-bottom:24px;font-weight:500;
}
.intro__title{
    font-family:'Playfair Display',serif;
    font-size:clamp(56px,10vw,128px);font-weight:400;
    line-height:.95;letter-spacing:-.02em;
}
.intro__title-dot{color:var(--accent)}
.intro__subtitle{
    margin-top:28px;font-size:clamp(16px,2vw,20px);
    color:var(--text-mute);font-weight:300;
}
.intro__scroll{
    margin-top:64px;display:flex;flex-direction:column;align-items:center;gap:10px;
    font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);
}
.intro__scroll svg{width:18px;height:18px;animation:bounce 2s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ─── Cases ─── */
.case{
    min-height:100vh;display:flex;align-items:center;
    padding:80px 40px;
    border-top:1px solid var(--border);
}
.case__inner{
    max-width:1240px;margin:0 auto;width:100%;
    display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.case__inner--reverse .case__visual{order:2}

/* Visual / browser mockup */
.case__visual{display:flex;justify-content:center}
.case__browser{
    width:100%;max-width:560px;border-radius:12px;overflow:hidden;
    background:var(--surface);border:1px solid var(--border);
    box-shadow:var(--shadow);
    transition:box-shadow .5s ease,transform .5s ease;
}
.case__browser:hover{box-shadow:var(--shadow-hover);transform:translateY(-4px)}
.case__browser-bar{
    display:flex;align-items:center;gap:7px;
    padding:12px 16px;background:var(--browser-bar);
}
.case__browser-bar span{
    width:10px;height:10px;border-radius:50%;
    background:#c8c4bc;
}
[data-theme="dark"] .case__browser-bar span{background:#4a4a4e}
.case__browser-bar span:nth-child(1){background:#e0656a}
.case__browser-bar span:nth-child(2){background:#f0a84d}
.case__browser-bar span:nth-child(3){background:#6cba6c}
.case__browser-url{
    margin-left:16px;font-size:12px;color:var(--text-mute);
    font-family:monospace;
}
.case__browser img{aspect-ratio:16/10;object-fit:cover;width:100%}

/* Info */
.case__num{
    font-family:'Playfair Display',serif;
    font-size:14px;color:var(--accent);
    letter-spacing:.15em;margin-bottom:12px;font-weight:500;
}
.case__title{
    font-family:'Playfair Display',serif;
    font-size:clamp(28px,4vw,42px);font-weight:400;
    line-height:1.1;margin-bottom:20px;
}
.case__tags{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.tag{
    padding:5px 14px;border-radius:100px;
    font-size:12px;font-weight:500;
    background:var(--accent);color:#fff;
}
.tag--ghost{background:transparent;border:1px solid var(--border);color:var(--text-mute)}

.case__list{list-style:none;margin-bottom:32px}
.case__list li{
    position:relative;padding-left:22px;margin-bottom:10px;
    font-size:15px;color:var(--text-mute);
}
.case__list li::before{
    content:'';position:absolute;left:0;top:10px;
    width:7px;height:7px;border-radius:50%;background:var(--accent);
}

.case__meta{
    border-top:1px solid var(--border);padding-top:20px;
}
.case__meta-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:8px 0;
}
.case__meta-row span{font-size:13px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em}
.case__meta-row a,.case__meta-row strong{font-size:15px;font-weight:500;color:var(--text)}
.case__meta-row a:hover{color:var(--accent)}

/* ─── Footer ─── */
.footer{
    position:relative;overflow:hidden;
    background:var(--bg-alt);
    border-top:1px solid var(--border);
    padding:80px 40px 32px;
    transition:background .4s ease;
}
.footer__bg-text{
    position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
    font-family:'Playfair Display',serif;
    font-size:clamp(60px,16vw,200px);font-weight:400;
    color:transparent;
    -webkit-text-stroke:1px var(--border);
    white-space:nowrap;pointer-events:none;
    letter-spacing:.02em;line-height:1;
}
.footer__inner{position:relative;max-width:1240px;margin:0 auto;z-index:1}

.footer__top{
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:60px;
}
.footer__name{
    font-family:'Playfair Display',serif;font-size:24px;font-weight:400;
}
.footer__name em{font-size:16px;color:var(--text-mute);font-weight:300;font-style:italic}
.footer__tagline{margin-top:12px;font-size:14px;color:var(--text-mute);font-weight:300;line-height:1.7}

.footer__col h4{
    font-size:12px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--text-mute);margin-bottom:16px;font-weight:500;
}
.footer__col a,.footer__col p{
    display:block;font-size:14px;margin-bottom:10px;color:var(--text);
    transition:color .2s;
}
.footer__col a:hover{color:var(--accent)}
.footer__city{color:var(--text-mute)!important;font-weight:300}

.footer__bottom{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:24px;border-top:1px solid var(--border);
    font-size:12px;color:var(--text-mute);
}

/* ─── Reveal animation ─── */
.reveal{
    opacity:0;transform:translateY(30px);
    transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.in{opacity:1;transform:translateY(0)}

/* ─── Responsive ─── */
@media(max-width:900px){
    .header{padding:14px 20px}
    .header__nav{display:none}

    .intro{padding:80px 20px}

    .case{padding:60px 20px;min-height:auto}
    .case__inner{grid-template-columns:1fr;gap:32px}
    .case__inner--reverse .case__visual{order:0}

    .footer{padding:60px 20px 24px}
    .footer__top{grid-template-columns:1fr 1fr;gap:32px}
    .footer__brand{grid-column:1/-1}
    .footer__bottom{flex-direction:column;gap:8px;text-align:center}
}

@media(max-width:480px){
    .footer__top{grid-template-columns:1fr}
}

/* ─── Reduced motion ─── */
@media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .reveal{opacity:1;transform:none}
}