:root{
  --bg:#2a211b;
  --ivory:#f3eee3;
  --ivory-soft:rgba(243,238,227,.6);
  --gold:#ab8a4f;
  --gold-light:#d7bd82;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--bg);}
body{
  height:860vh; /* scroll space: 7 scenes x 100vh + buffer so the previous scene has room to fully fade out */
  background:var(--bg);
  color:var(--ivory);
  font-family:'Manrope',sans-serif;
  cursor:none;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--bg);}
img{display:block;max-width:100%;}


/* ---------- custom cursor ---------- */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:999;border-radius:50%;transform:translate(-50%,-50%);will-change:transform;}
.cur-dot{width:6px;height:6px;background:var(--gold-light);transition:opacity .25s var(--ease);}
.cur-ring{width:32px;height:32px;border:1px solid var(--gold-light);transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease);display:flex;align-items:center;justify-content:center;}
.cur-ring span{font-family:'Fraunces',serif;font-style:italic;font-size:11px;color:var(--bg);opacity:0;transition:opacity .25s var(--ease);white-space:nowrap;}
body.cur-hover .cur-ring{width:62px;height:62px;background:var(--gold-light);}
body.cur-hover .cur-ring span{opacity:1;}
body.cur-hover .cur-dot{opacity:0;}
@media (pointer:coarse){.cur-dot,.cur-ring{display:none;} body{cursor:auto;}}

/* ---------- header : logo only ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;justify-content:center;
  padding:34px 0 0;
  pointer-events:none;
  opacity:0;
  transform:translateY(16vh);
  transition:opacity 1.2s var(--ease), transform 1.3s var(--ease);
}
body.loaded .site-header{opacity:1;transform:translateY(0);}
.brand-mark img{height:22px;width:auto;}

/* ---------- scroll hint ---------- */
/* ---------- preloader ---------- */
#preloader{
  position:fixed;inset:0;
  z-index:500;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.preloader-pct{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(48px,9vw,96px);
  letter-spacing:.02em;
  color:rgba(243,238,227,.4);
  min-width:3.5ch;
  text-align:center;
  line-height:1;
}

.scroll-hint{
  position:fixed;left:50%;bottom:64px;transform:translateX(-50%) translateY(-16vh);
  z-index:200;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory-soft);
  pointer-events:none;
  opacity:0;
  transition:opacity 1.2s var(--ease) .15s, transform 1.3s var(--ease) .15s;
}
body.loaded .scroll-hint{opacity:1;transform:translateX(-50%) translateY(0);}
.scroll-hint i{width:1px;height:30px;background:rgba(243,238,227,.35);position:relative;overflow:hidden;}
.scroll-hint i::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--gold-light);animation:cue 1.9s ease-in-out infinite;}
@keyframes cue{0%{top:-100%;}60%{top:100%;}100%{top:100%;}}

.site-footer{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(-16vh);
  z-index:200;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.2s var(--ease) .15s, transform 1.3s var(--ease) .15s;
}
body.loaded .site-footer{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- fixed camera scene ---------- */
.scene{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  perspective:1400px;
  overflow:hidden;
  background:var(--bg);
}
.v-divider{
  position:fixed;
  top:0;
  width:1px;
  height:100vh;
  background:rgba(243,238,227,.1);
  pointer-events:none;
  z-index:0;
  transform:scaleY(0);
  transform-origin:center center;
  transition:transform 1.1s var(--ease) .1s;
}
body.loaded .v-divider{transform:scaleY(1);}

.scene-item{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0 7vw;
  will-change:opacity;
}
.scene-item:not([data-scene="0"]){opacity:0;}
/* solo, text-less images sit slightly off to one side, as if there were
   text occupying the opposite side, without pushing all the way to the edge */
.scene-item[data-scene="2"] .z-media{transform:translateX(22%);}
.scene-item[data-scene="3"] .z-media{transform:translateX(-35%);}
.scene-item[data-scene="5"] .z-media{transform:translateX(-48%);}
.scene-inner{
  transform-origin:center center;
  will-change:transform, filter;
}

/* ---------- hero content ---------- */
.hero-frame{
  position:relative;
  width:min(74vw,980px);
  aspect-ratio:16/9;
  overflow:hidden;
  opacity:0;
  transform:scale(.6);
  transition:opacity 1.4s var(--ease), transform 2.2s var(--ease);
}
body.loaded .hero-frame{opacity:1;transform:scale(1);}
.hero-frame::after{
  content:'';
  position:absolute;inset:0;
  background-image:
    radial-gradient(var(--bg) .8px, transparent .8px),
    radial-gradient(var(--bg) .8px, transparent .8px);
  background-size:6px 6px, 6px 6px;
  background-position:0 0, 3px 3px;
  opacity:.5;
  pointer-events:none;
}
.hero-video{width:100%;height:100%;display:block;object-fit:cover;}

/* ---------- text + image scenes ---------- */
.z-text-image{
  display:flex;
  align-items:center;
  gap:6vw;
  max-width:1400px;
}
.z-text-image.reverse{flex-direction:row-reverse;}
.z-text{max-width:20ch;}
.z-text h3{
  font-family:'Fraunces',serif;font-weight:400;font-size:clamp(12px,1vw,15px);
  line-height:1.55;color:var(--ivory);
}
.z-media{
  position:relative;
  overflow:hidden;
  flex:none;
  background:linear-gradient(155deg,#2a2019 0%, #171310 45%, #241a14 100%);
}
.z-media img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center center;}
.z-media.tall{width:min(22vw,280px);aspect-ratio:3/4.3;}
.z-media.solo{width:min(33vw,390px);aspect-ratio:3/4.3;}
.z-media.big{width:min(52vw,660px);aspect-ratio:4/3;}

/* ---------- final scene ---------- */
.z-final-group{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:34px;
}
.order-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:17px 28px 17px 34px;
  position:relative;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%27120%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200.06%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E"),
    linear-gradient(180deg, #e6c98c 0%, #ab8a4f 100%);
  background-blend-mode:overlay, normal;
  background-repeat:repeat, no-repeat;
  background-size:120px 120px, 100% 100%;
  color:#241a0f;
  border-radius:100px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  text-decoration:none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.25) inset,
    0 6px 20px rgba(224,201,169,.22),
    0 1px 1px rgba(61,40,23,.2),
    0 2px 2px rgba(61,40,23,.2),
    0 4px 4px rgba(61,40,23,.18),
    0 8px 8px rgba(61,40,23,.16),
    0 16px 16px rgba(61,40,23,.14),
    0 32px 32px rgba(61,40,23,.12),
    0 64px 64px rgba(61,40,23,.1),
    0 14px 24px rgba(10,6,3,.4),
    0 28px 40px rgba(10,6,3,.28);
  transition:box-shadow .35s var(--ease), transform .2s var(--ease);
}
.order-btn:hover{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%27120%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200.06%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E"),
    linear-gradient(180deg, #f0d9a3 0%, #c29a5c 100%);
  background-blend-mode:overlay, normal;
  background-repeat:repeat, no-repeat;
  background-size:120px 120px, 100% 100%;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.3) inset,
    0 8px 26px rgba(224,201,169,.3),
    0 1px 1px rgba(61,40,23,.24),
    0 2px 2px rgba(61,40,23,.24),
    0 4px 4px rgba(61,40,23,.22),
    0 8px 8px rgba(61,40,23,.2),
    0 16px 16px rgba(61,40,23,.18),
    0 32px 32px rgba(61,40,23,.15),
    0 64px 64px rgba(61,40,23,.12),
    0 16px 28px rgba(10,6,3,.46),
    0 32px 46px rgba(10,6,3,.32);
  transform:translateY(-2px);
}
.order-btn:active{
  transform:translateY(0px) scale(.98);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.4) inset,
    0 4px 14px rgba(224,201,169,.25),
    0 1px 1px rgba(61,40,23,.2),
    0 2px 2px rgba(61,40,23,.18),
    0 4px 4px rgba(61,40,23,.14);
}
.order-btn-arrow{
  width:15px;height:15px;flex:none;
  transition:transform .3s var(--ease);
}
.order-btn:hover .order-btn-arrow{transform:translateX(4px);}
.copyright{font-size:11px;letter-spacing:.05em;color:rgba(243,238,227,.4);}

@media (max-width:820px){
  .z-text-image{flex-direction:column;gap:26px;}
  .z-text-image.reverse{flex-direction:column;}
  .z-text{max-width:22ch;margin:0 auto;text-align:center;}
  .z-media.tall,.z-media.solo{width:min(50vw,260px);}
  .z-media.big{width:74vw;}
}
@media (orientation:portrait){
  .hero-frame{width:94vw;aspect-ratio:4/5;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important; transition-duration:.001s !important;}
  body{height:auto;}
  .scene{position:relative;flex-direction:column;height:auto;padding:10vh 0;gap:14vh;}
  .scene-item{position:relative;inset:auto;opacity:1 !important;transform:none !important;}
}