/* =============================================================================
   Atelier 3D — image-dominant portfolio template
   Style: themed parallax panels, each with a 3D coverflow gallery deck.
   :root palette vars are managed by the engine (apply_palette + apply_style),
   exactly like Parallax. Non-palette vars live on `body` so the :root
   regex-replace doesn't wipe them.
   ============================================================================= */

:root {
  /* Palette: Champagne Noir */
  --bg: #0d0c0b;
  --primary: #c9a96a;
  --accent: #e8dccb;
  --text: #f4efe9;
  --overlay-color: 13, 12, 11;
  --overlay-opacity: 0.44;
  --overlay-opacity-heavy: 0.68;
  --text-on-image: #f4efe9;
  --button-bg-on-image: #c9a96a;
  --button-text-on-image: #0d0c0b;

  /* Typography System */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing & Layout */
  --nav-h:       72px;
  --section-pad: 7rem;
  --container:   1200px;
  --radius: 0px;
  --radius-lg: 0px;
  --transition:  .3s ease;
}

body {
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-deck: cubic-bezier(0.22, 0.61, 0.36, 1);

    font-family: var(--font-body);
    color: var(--text-on-image);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* grain */
body::after{
    content:""; position:fixed; inset:0; z-index:95; pointer-events:none; opacity:.045;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =============================================================================
   Snap container & panels  (same scroll model as Parallax)
   ============================================================================= */
.snap-container{
    height:100vh; overflow-y:scroll; scroll-snap-type:y mandatory;
    scroll-behavior:smooth; scrollbar-width:none;
}
.snap-container::-webkit-scrollbar{ display:none; }

.panel{
    position:relative; height:100vh; width:100%;
    scroll-snap-align:start; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}
.panel__bg{
    position:absolute; inset:-12% 0; background-size:cover; background-position:center;
    will-change:transform; transform:scale(1.05);
}
.panel--noir .panel__bg{ filter:grayscale(1) contrast(1.05); }
.panel__overlay{
    position:absolute; inset:0;
    background:radial-gradient(140% 100% at 50% 50%,
        rgba(var(--overlay-color), calc(var(--overlay-opacity) * 0.45)),
        rgba(var(--overlay-color), var(--overlay-opacity)));
}
/* electric aurora wash, tinted by palette */
.panel__aurora{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    mix-blend-mode:screen; opacity:.45;
    background:
      radial-gradient(50% 60% at 18% 30%, color-mix(in srgb, var(--primary) 35%, transparent), transparent 60%),
      radial-gradient(46% 56% at 84% 72%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 60%);
    animation:drift 16s ease-in-out infinite alternate;
}
@keyframes drift{ to{ transform:translate3d(4%,-3%,0) scale(1.08); } }

.panel__content{ position:relative; z-index:5; width:100%; }
.panel__content--center{ text-align:center; padding:0 var(--space-md); }

.ghost{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    font-family:var(--font-display); font-style:italic; font-size:46vh; line-height:1;
    color:var(--text-on-image); opacity:.045; z-index:1; pointer-events:none; user-select:none;
}

/* =============================================================================
   Brand mark + side nav  (mirrors Parallax)
   ============================================================================= */
.brand-mark{
    position:fixed; top:0; left:0; right:0; z-index:80;
    display:flex; justify-content:space-between; align-items:center;
    padding:24px 38px; mix-blend-mode:difference;
}
.brand-mark__name{ font-family:var(--font-display); font-size:20px; letter-spacing:.22em; font-weight:500; }
.brand-mark__repd{ font-size:10px; letter-spacing:.32em; text-transform:uppercase; opacity:.85; }

.side-nav{ position:fixed; right:30px; top:50%; transform:translateY(-50%); z-index:80; }
.nav-dots{ list-style:none; display:flex; flex-direction:column; gap:16px; }
.nav-dots button{
    background:none; border:1px solid var(--text-on-image); opacity:.45;
    width:8px; height:8px; border-radius:50%; cursor:pointer; transition:.3s; padding:0;
}
.nav-dots button.is-active{
    opacity:1; background:var(--primary); border-color:var(--primary);
    box-shadow:0 0 10px var(--primary); transform:scale(1.15);
}

/* =============================================================================
   Hero
   ============================================================================= */
.eyebrow{
    font-size:11px; letter-spacing:.5em; text-transform:uppercase; margin-bottom:22px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.display{ font-family:var(--font-display); font-weight:400; letter-spacing:.04em; line-height:.92;
    font-size:clamp(48px,11vw,150px); }
.display em{ font-style:italic; }
.lede{ margin-top:22px; font-size:13px; letter-spacing:.4em; text-transform:uppercase; color:var(--text-on-image); opacity:.7; }
.scroll-cue{
    position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:6;
    font-size:10px; letter-spacing:.4em; text-transform:uppercase; opacity:.7;
    display:flex; flex-direction:column; align-items:center; gap:12px;
}
.scroll-cue__line{ width:1px; height:46px; background:linear-gradient(var(--primary),transparent);
    animation:dropline 2.2s ease-in-out infinite; }
@keyframes dropline{ 0%,100%{opacity:.3;transform:scaleY(.4);transform-origin:top} 50%{opacity:1;transform:scaleY(1)} }

/* =============================================================================
   Theme label + 3D coverflow deck
   ============================================================================= */
.stage{ display:flex; flex-direction:column; align-items:center; gap:30px; width:100%; }
.theme-label{ text-align:center; }
.theme-label .num{ font-size:11px; letter-spacing:.5em;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    -webkit-background-clip:text; background-clip:text; color:transparent; }
.theme-label h2{ font-family:var(--font-display); font-weight:400; letter-spacing:.03em; line-height:1;
    font-size:clamp(34px,6vw,72px); margin-top:10px; }

.scene{ position:relative; width:min(90vw,820px); height:min(56vh,440px);
    perspective:1600px; perspective-origin:50% 45%; }
.ring{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .6s ease; }
.card{
    position:absolute; top:50%; left:50%; width:min(46vmin,320px); aspect-ratio:1/1;
    transform-style:preserve-3d;
    transition:transform .8s var(--ease-deck), opacity .8s, filter .8s;
    will-change:transform; cursor:pointer;
}
.card__img{ position:absolute; inset:0; background-size:cover; background-position:center;
    box-shadow:0 30px 70px -20px rgba(0,0,0,.85); }
.card__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    box-shadow:0 30px 70px -20px rgba(0,0,0,.85); background:#000; }
.panel--noir .card__video{ filter:grayscale(1) contrast(1.05); }
.panel--noir .card__img{ filter:grayscale(1) contrast(1.05); }
.card__edge{
    position:absolute; inset:-2px; pointer-events:none; opacity:0; transition:opacity .6s;
    background:linear-gradient(130deg,var(--primary),var(--accent),var(--primary));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; padding:2px;
    filter:drop-shadow(0 0 14px color-mix(in srgb, var(--primary) 60%, transparent));
}
.card__sheen{
    position:absolute; inset:0; pointer-events:none; opacity:0;
    background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.26) 48%,transparent 62%);
    transform:translateX(-120%);
}
.card.is-active .card__edge{ opacity:1; }
.card.is-active .card__sheen{ opacity:1; animation:sweep 3.6s ease-in-out infinite; }
@keyframes sweep{ 0%{transform:translateX(-120%)} 55%,100%{transform:translateX(120%)} }
.card__refl{
    position:absolute; top:100%; left:0; right:0; height:55%; background-size:cover; background-position:center;
    transform:scaleY(-1); opacity:.16;
    -webkit-mask-image:linear-gradient(rgba(0,0,0,.6),transparent);
    mask-image:linear-gradient(rgba(0,0,0,.6),transparent);
}
.panel--noir .card__refl{ filter:grayscale(1); }

/* minimal chevron cue — just the mark, no disc */
.cue{
    position:absolute; top:50%; z-index:8; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; padding:14px; line-height:0;
    color:var(--primary);
    filter:drop-shadow(0 0 10px color-mix(in srgb, var(--primary) 70%, transparent));
    transition:opacity .3s, transform .3s;
}
.cue svg{ width:34px; height:54px; }
.cue--next{ right:max(3vw,14px); animation:beckon 1.8s ease-in-out infinite; }
.cue--prev{ left:max(3vw,14px); transform:translateY(-50%) scaleX(-1); opacity:.55; }
.cue--prev[hidden]{ display:none; }
.cue:hover{ transform:translateY(-50%) translateX(6px); }
.cue--prev:hover{ transform:translateY(-50%) scaleX(-1) translateX(6px); opacity:.9; }
@keyframes beckon{ 0%,100%{transform:translateY(-50%) translateX(0)} 50%{transform:translateY(-50%) translateX(9px)} }

.counter{ font-family:var(--font-display); font-style:italic; font-size:17px;
    opacity:.7; letter-spacing:.1em; }
.counter b{ font-style:normal; font-weight:500; opacity:1; color:var(--text-on-image); }

/* contact */
.status{ display:inline-block; margin-top:18px; padding:6px 16px; font-size:10px;
    letter-spacing:.28em; text-transform:uppercase; color:var(--text-on-image);
    border:1px solid color-mix(in srgb, var(--primary) 55%, transparent); border-radius:999px;
    box-shadow:0 0 14px color-mix(in srgb, var(--primary) 30%, transparent); }
.social-row{ display:flex; gap:22px; justify-content:center; margin-top:var(--space-lg); flex-wrap:wrap; }
.social-row a{ color:var(--text-on-image); text-decoration:none; font-size:11px;
    letter-spacing:.28em; text-transform:uppercase; opacity:.75; transition:.3s; }
.social-row a:hover{ opacity:1; color:var(--primary); }
.contact-channels{ display:flex; gap:var(--space-xl); justify-content:center; margin-top:var(--space-lg); flex-wrap:wrap; }
.contact-channel{ color:var(--text-on-image); text-decoration:none; display:flex; flex-direction:column; gap:6px; }
.contact-channel__label{ font-size:10px; letter-spacing:.35em; text-transform:uppercase; opacity:.6; }
.contact-channel__value{ font-family:var(--font-display); font-size:20px; }
.btn{ display:inline-block; margin-top:var(--space-lg); padding:14px 30px; text-decoration:none;
    font-size:12px; letter-spacing:.25em; text-transform:uppercase;
    background:var(--button-bg-on-image); color:var(--button-text-on-image); }
.footer-mark{ margin-top:var(--space-xl); font-size:11px; letter-spacing:.2em; opacity:.55; }

/* full-screen lightbox */
.lightbox{
    position:fixed; inset:0; z-index:200; display:none;
    align-items:center; justify-content:center;
    background:rgba(4,4,9,.94); backdrop-filter:blur(6px);
    opacity:0; transition:opacity .35s ease;
}
.lightbox.is-open{ display:flex; opacity:1; }
.lightbox__media{
    max-width:92vw; max-height:88vh; object-fit:contain;
    box-shadow:0 40px 120px -30px rgba(0,0,0,.9);
    outline:1px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset:8px;
}
.lightbox__close{
    position:absolute; top:22px; right:26px; z-index:2;
    background:none; border:none; color:var(--paper, #eef1ff); font-size:38px; line-height:1;
    cursor:pointer; opacity:.7; transition:.3s;
}
.lightbox__close:hover{ opacity:1; color:var(--primary); }
.lightbox__nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    background:none; border:none; cursor:pointer; color:var(--paper, #eef1ff); padding:18px; opacity:.6;
    transition:.3s; filter:drop-shadow(0 0 8px color-mix(in srgb, var(--primary) 60%, transparent));
}
.lightbox__nav:hover{ opacity:1; color:var(--primary); }
.lightbox__nav svg{ width:34px; height:54px; }
.lightbox__nav--prev{ left:max(2vw,10px); }
.lightbox__nav--next{ right:max(2vw,10px); }
.lightbox__count{
    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
    font-family:var(--font-display); font-style:italic; font-size:15px; opacity:.7; letter-spacing:.1em;
}

@media(max-width:640px){
    .side-nav{ right:12px; }
    .cue--next{ right:8px; } .cue--prev{ left:8px; }
    .brand-mark{ padding:16px 18px; }
    .contact-channels{ gap:var(--space-lg); }
}