/* =============================================================================
   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.
   Atelier 3D — Premium Cinematic Portfolio (2026 Edition)
   Enhanced for maximum professional WOW: deeper 3D presence, luxury details,
   refined interactions, and cinematic atmosphere. All original tokens,
   classes, and structure preserved.
   ========================================================================== */
: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: 'Bodoni Moda', 'Georgia', serif;
  --font-body: 'Space Grotesk', -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: 1.1rem;
    --space-md: 1.7rem;
    --space-lg: 2.8rem;
    --space-xl: 4.5rem;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-deck: cubic-bezier(0.23, 1, 0.32, 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.65;
}

/* Enhanced cinematic grain */
body::after{
    content:""; 
    position:fixed; 
    inset:0; 
    z-index:95; 
    pointer-events:none; 
    opacity:.065;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: subtle-grain 14s steps(10) infinite;
}
@keyframes subtle-grain {
    0% { transform: translate(0,0); }
    10% { transform: translate(-1%,-1%); }
    20% { transform: translate(1%,1%); }
}

* { 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;
}

/* =============================================================================
   Snap container & panels — More immersive
   ========================================================================== */
.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:-15% 0; 
    background-size:cover; 
    background-position:center;
    will-change:transform; 
    transform:scale(1.08);
    transition: transform 1.2s var(--ease-out);
}
.panel--noir .panel__bg{ 
    filter:grayscale(0.85) contrast(1.08); 
}
.panel__overlay{
    position:absolute; 
    inset:0;
    background:radial-gradient(145% 105% at 50% 50%,
        rgba(var(--overlay-color), calc(var(--overlay-opacity) * 0.5)),
        rgba(var(--overlay-color), var(--overlay-opacity-heavy)));
}
.panel__aurora{
    position:absolute; 
    inset:0; 
    z-index:1; 
    pointer-events:none;
    mix-blend-mode:screen; 
    opacity:.52;
    background:
      radial-gradient(55% 65% at 20% 28%, color-mix(in srgb, var(--primary) 40%, transparent), transparent 65%),
      radial-gradient(50% 60% at 82% 75%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 65%);
    animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{ 
    to{ transform:translate3d(5%,-4%,0) scale(1.1); } 
}

.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:48vh; 
    line-height:1;
    color:var(--text-on-image); 
    opacity:.038; 
    z-index:1; 
    pointer-events:none; 
    user-select:none;
    filter: blur(2px);
}

/* =============================================================================
   Brand mark — Glassmorphic Luxury
   ========================================================================== */
.brand-mark{
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    z-index:90;
    display:flex; 
    justify-content:space-between; 
    align-items:center;
    padding:28px 42px; 
    background: rgba(var(--overlay-color), 0.65);
    backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: all .4s var(--ease-out);
}
.brand-mark__name{ 
    font-family:var(--font-display); 
    font-size:21px; 
    letter-spacing:.24em; 
    font-weight:500; 
}
.brand-mark__repd{ 
    font-size:10.5px; 
    letter-spacing:.34em; 
    text-transform:uppercase; 
    opacity:.88; 
}

/* Side nav — refined */
.side-nav{ 
    position:fixed; 
    right:32px; 
    top:50%; 
    transform:translateY(-50%); 
    z-index:90; 
}
.nav-dots{ 
    list-style:none; 
    display:flex; 
    flex-direction:column; 
    gap:18px; 
}
.nav-dots button{
    background:none; 
    border:1.5px solid var(--text-on-image); 
    opacity:.5;
    width:9px; 
    height:9px; 
    border-radius:50%; 
    cursor:pointer; 
    transition:.4s var(--ease-out); 
    padding:0;
}
.nav-dots button.is-active{
    opacity:1; 
    background:var(--primary); 
    border-color:var(--primary);
    box-shadow:0 0 14px var(--primary); 
    transform:scale(1.25);
}

/* =============================================================================
   Hero — More impactful
   ========================================================================== */
.eyebrow{
    font-size:11.5px; 
    letter-spacing:.52em; 
    text-transform:uppercase; 
    margin-bottom:24px;
    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:.035em; 
    line-height:.9;
    font-size:clamp(52px,12vw,158px); 
}
.display em{ font-style:italic; }
.lede{ 
    margin-top:26px; 
    font-size:13.5px; 
    letter-spacing:.42em; 
    text-transform:uppercase; 
    color:var(--text-on-image); 
    opacity:.75; 
}
.scroll-cue{
    position:absolute; 
    bottom:38px; 
    left:50%; 
    transform:translateX(-50%); 
    z-index:6;
    font-size:10.5px; 
    letter-spacing:.42em; 
    text-transform:uppercase; 
    opacity:.75;
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    gap:14px;
}
.scroll-cue__line{ 
    width:1px; 
    height:52px; 
    background:linear-gradient(var(--primary),transparent);
    animation:dropline 2.4s ease-in-out infinite; 
}
@keyframes dropline{ 
    0%,100%{opacity:.35;transform:scaleY(.35);transform-origin:top} 
    50%{opacity:1;transform:scaleY(1)} 
}

/* =============================================================================
   Theme label + Enhanced 3D Coverflow
   ========================================================================== */
.stage{ 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    gap:34px; 
    width:100%; 
}
.theme-label{ text-align:center; }
.theme-label .num{ 
    font-size:11.5px; 
    letter-spacing:.52em;
    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:.028em; 
    line-height:1;
    font-size:clamp(36px,6.5vw,78px); 
    margin-top:12px; 
}

.scene{ 
    position:relative; 
    width:min(92vw,860px); 
    height:min(58vh,460px);
    perspective:1800px; 
    perspective-origin:50% 42%; 
}
.ring{ 
    position:absolute; 
    inset:0; 
    transform-style:preserve-3d; 
    transition:transform .75s var(--ease-deck); 
}

.card{
    position:absolute; 
    top:50%; 
    left:50%; 
    width:min(48vmin,340px); 
    aspect-ratio:1/1;
    transform-style:preserve-3d;
    transition:transform .85s var(--ease-deck), opacity .6s, filter .6s;
    will-change:transform; 
    cursor:pointer;
    box-shadow:0 35px 80px -25px rgba(0,0,0,.9);
}
.card__img{ 
    position:absolute; 
    inset:0; 
    background-size:var(--gallery-fit, cover); 
    background-position:center;
    background-repeat:no-repeat; 
    background-color:#0b0b12;
    box-shadow:0 30px 70px -20px rgba(0,0,0,.85); 
}
.card__video{ 
    position:absolute; 
    inset:0; 
    width:100%; 
    height:100%; 
    object-fit:var(--gallery-fit, cover);
    box-shadow:0 30px 70px -20px rgba(0,0,0,.85); 
    background:#000; 
}

body.gallery-full{ --gallery-fit: contain; }

.card__edge{
    position:absolute; 
    inset:-3px; 
    pointer-events:none; 
    opacity:0; 
    transition:opacity .7s;
    background:linear-gradient(135deg,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:3px;
    filter:drop-shadow(0 0 18px color-mix(in srgb, var(--primary) 65%, transparent));
}
.card__sheen{
    position:absolute; 
    inset:0; 
    pointer-events:none; 
    opacity:0;
    background:linear-gradient(118deg,transparent 32%,rgba(255,255,255,.32) 50%,transparent 68%);
    transform:translateX(-130%);
}
.card.is-active .card__edge{ opacity:1; }
.card.is-active .card__sheen{ 
    opacity:1; 
    animation:sweep 3.2s ease-in-out infinite; 
}
@keyframes sweep{ 
    0%{transform:translateX(-130%)} 
    55%,100%{transform:translateX(130%)} 
}

.card__refl{
    position:absolute; 
    top:100%; 
    left:0; 
    right:0; 
    height:58%; 
    background-size:var(--gallery-fit, cover); 
    background-position:center;
    transform:scaleY(-1); 
    opacity:.18;
    -webkit-mask-image:linear-gradient(rgba(0,0,0,.65),transparent);
    mask-image:linear-gradient(rgba(0,0,0,.65),transparent);
}

/* Cues & Counter */
.cue{
    position:absolute; 
    top:50%; 
    z-index:8; 
    transform:translateY(-50%);
    background:none; 
    border:none; 
    cursor:pointer; 
    padding:16px; 
    line-height:0;
    color:var(--primary);
    filter:drop-shadow(0 0 12px color-mix(in srgb, var(--primary) 75%, transparent));
    transition:all .4s var(--ease-out);
}
.cue svg{ width:36px; height:56px; }
.cue--next{ right:max(4vw,18px); animation:beckon 1.9s ease-in-out infinite; }
.cue--prev{ left:max(4vw,18px); transform:translateY(-50%) scaleX(-1); opacity:.6; }
.cue:hover{ transform:translateY(-50%) translateX(8px); }
.cue--prev:hover{ transform:translateY(-50%) scaleX(-1) translateX(8px); opacity:1; }
@keyframes beckon{ 
    0%,100%{transform:translateY(-50%) translateX(0)} 
    50%{transform:translateY(-50%) translateX(10px)} 
}

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

/* Contact — More premium */
.status{ 
    display:inline-block; 
    margin-top:20px; 
    padding:7px 18px; 
    font-size:10.5px;
    letter-spacing:.3em; 
    text-transform:uppercase; 
    color:var(--text-on-image);
    border:1px solid color-mix(in srgb, var(--primary) 60%, transparent); 
    border-radius:999px;
    box-shadow:0 0 16px color-mix(in srgb, var(--primary) 35%, transparent); 
}
.social-row{ 
    display:flex; 
    gap:26px; 
    justify-content:center; 
    margin-top:var(--space-lg); 
    flex-wrap:wrap; 
}
.social-row a{ 
    color:var(--text-on-image); 
    text-decoration:none; 
    font-size:11.5px;
    letter-spacing:.3em; 
    text-transform:uppercase; 
    opacity:.78; 
    transition:.4s var(--ease-out); 
}
.social-row a:hover{ 
    opacity:1; 
    color:var(--primary); 
    transform:translateY(-1px); 
}
.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:7px; 
}
.contact-channel__label{ 
    font-size:10.5px; 
    letter-spacing:.36em; 
    text-transform:uppercase; 
    opacity:.65; 
}
.contact-channel__value{ 
    font-family:var(--font-display); 
    font-size:21px; 
}
.btn{ 
    display:inline-block; 
    margin-top:var(--space-lg); 
    padding:15px 34px; 
    text-decoration:none;
    font-size:12.5px; 
    letter-spacing:.26em; 
    text-transform:uppercase;
    background:var(--button-bg-on-image); 
    color:var(--button-text-on-image); 
    border-radius:4px;
    transition: all .4s var(--ease-out);
}
.btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,.4);
}

/* Lightbox — More dramatic */
.lightbox{
    position:fixed; 
    inset:0; 
    z-index:200; 
    display:none;
    align-items:center; 
    justify-content:center;
    background:rgba(4,4,9,.96); 
    backdrop-filter:blur(12px);
    opacity:0; 
    transition:opacity .4s var(--ease-out);
}
.lightbox.is-open{ 
    display:flex; 
    opacity:1; 
}
.lightbox__media{
    max-width:94vw; 
    max-height:92vh; 
    object-fit:contain;
    box-shadow:0 50px 140px -30px rgba(0,0,0,.95);
    outline:2px solid color-mix(in srgb, var(--primary) 45%, transparent); 
    outline-offset:10px;
    border-radius:6px;
}
.lightbox__close{
    position:absolute; 
    top:28px; 
    right:32px; 
    z-index:2;
    background:none; 
    border:none; 
    color:var(--paper, #eef1ff); 
    font-size:42px; 
    line-height:1;
    cursor:pointer; 
    opacity:.75; 
    transition:.4s var(--ease-out);
}
.lightbox__close:hover{ 
    opacity:1; 
    color:var(--primary); 
    transform:scale(1.1); 
}
.lightbox__nav{
    position:absolute; 
    top:50%; 
    transform:translateY(-50%); 
    z-index:2;
    background:none; 
    border:none; 
    cursor:pointer; 
    color:var(--paper, #eef1ff); 
    padding:20px; 
    opacity:.65;
    transition:.4s var(--ease-out); 
}
.lightbox__nav:hover{ 
    opacity:1; 
    color:var(--primary); 
    transform:translateY(-50%) scale(1.08); 
}
.lightbox__nav svg{ width:36px; height:56px; }
.lightbox__nav--prev{ left:max(3vw,14px); }
.lightbox__nav--next{ right:max(3vw,14px); }
.lightbox__count{
    position:absolute; 
    bottom:28px; 
    left:50%; 
    transform:translateX(-50%);
    font-family:var(--font-display); 
    font-style:italic; 
    font-size:16px; 
    opacity:.75; 
    letter-spacing:.12em;
}

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