/* ConneryFilm — motion layer.
   Everything here is decorative-but-meaningful and every piece of it
   switches off under prefers-reduced-motion (see the block at the end). */

/* ── Page curtain ──────────────────────────────────────────
   A black frame lifts off the hero on load, like a shutter opening. */

.curtain {
  position: fixed; inset: 0; z-index: 400;
  background: var(--obsidian);
  display: grid; place-items: center;
  transition: opacity .7s var(--ease), visibility .7s;
}
.curtain__mark {
  /* Same wordmark face as the header — this rule loads after styles.css,
     so the family has to be repeated here or Playfair wins. */
  font-family: "Across the Road", var(--serif);
  font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 400;
  color: var(--ivory); letter-spacing: .12em;
  opacity: 0; transform: translateY(14px);
  animation: curtain-mark 1.5s var(--ease) forwards;
}
.curtain__bar {
  position: absolute; left: 50%; bottom: 34%; translate: -50% 0;
  width: min(220px, 42vw); height: 1px; background: rgba(247,243,236,.16);
  overflow: hidden;
}
.curtain__bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--champagne));
  transform: scaleX(0); transform-origin: left;
  animation: curtain-load 1.4s var(--ease) forwards;
}
@keyframes curtain-mark { to { opacity: 1; transform: none; } }
@keyframes curtain-load { to { transform: scaleX(1); } }
.curtain.is-gone { opacity: 0; visibility: hidden; }

/* Hero content waits for the curtain, then arrives. */
body:not(.is-ready) .hero-inner { opacity: 0; }

/* ── Ambient light ────────────────────────────────────────
   Slow drifting pools of gold behind the dark sections. */

.ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ambient i {
  position: absolute; display: block; border-radius: 50%;
  width: 42vmax; height: 42vmax;
  background: radial-gradient(closest-side, rgba(201,162,74,.13), transparent 72%);
  will-change: transform;
}
.ambient i:nth-child(1) { top: -18%; left: -12%; animation: amb-1 52s ease-in-out infinite alternate; }
.ambient i:nth-child(2) { bottom: -22%; right: -14%; width: 34vmax; height: 34vmax;
  background: radial-gradient(closest-side, rgba(138,103,27,.16), transparent 72%);
  animation: amb-2 64s ease-in-out infinite alternate; }
.ambient i:nth-child(3) { top: 34%; right: 22%; width: 26vmax; height: 26vmax;
  background: radial-gradient(closest-side, rgba(247,243,236,.05), transparent 70%);
  animation: amb-3 74s ease-in-out infinite alternate; }
@keyframes amb-1 { to { transform: translate(16vw, 12vh) scale(1.28); } }
@keyframes amb-2 { to { transform: translate(-14vw, -10vh) scale(.82); } }
@keyframes amb-3 { to { transform: translate(11vw, -13vh) scale(1.2); } }

.dark, .trust { position: relative; }
.dark > .wrap, .trust > .wrap { position: relative; z-index: 1; }

/* ── Drifting dust ────────────────────────────────────────
   Barely-there motes, like light through a window. */

.dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.dust b {
  position: absolute; bottom: -12px; display: block;
  width: 2px; height: 2px; border-radius: 50%;
  background: var(--champagne); opacity: 0;
  animation: dust-rise linear infinite, dust-glint 3.6s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes dust-rise {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--sway, 3vw), -112%, 0); }
}
@keyframes dust-glint { from { opacity: .06; } to { opacity: .5; } }

/* ── Section-head choreography ────────────────────────────
   Eyebrow, then the heading wipes up from a mask, then the copy,
   then a gold rule draws itself and a diamond snaps in. */

.section-head .eyebrow {
  opacity: 0; transform: translateY(12px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.section-head h2 {
  opacity: 0; transform: translateY(34px);
  clip-path: inset(0 0 100% 0);
  transition: opacity .7s var(--ease) .12s, transform .7s var(--ease) .12s, clip-path .7s var(--ease) .12s;
}
.section-head > p {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease) .3s, transform .6s var(--ease) .3s;
}
.section-head .rule {
  display: block; position: relative; height: 1px; width: 120px;
  margin-top: var(--space-3); background: rgba(11,11,12,.16);
}
.dark .section-head .rule { background: rgba(247,243,236,.16); }
.section-head .rule::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--champagne));
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease) .34s;
}
.section-head .rule i {
  position: absolute; right: -4px; top: -3.5px;
  width: 8px; height: 8px; background: var(--champagne);
  transform: rotate(45deg) scale(0);
  transition: transform .5s var(--ease) .64s;
}
.section-head.is-in .eyebrow,
.section-head.is-in > p { opacity: 1; transform: none; }
.section-head.is-in h2 { opacity: 1; transform: none; clip-path: inset(-.25em 0 -.25em 0); }
.section-head.is-in .rule::after { transform: scaleX(1); }
.section-head.is-in .rule i { transform: rotate(45deg) scale(1); }

/* The old underline is replaced by the rule above. */
.section-head h2::after { display: none; }

/* ── Gallery ──────────────────────────────────────────────
   Tiles wipe up from a mask rather than simply fading. */

.gallery figure {
  opacity: 0; transform: translateY(30px);
  clip-path: inset(0 0 100% 0);
  transition: opacity .85s var(--ease), transform .85s var(--ease), clip-path .85s var(--ease);
  cursor: zoom-in;
}
.gallery figure.in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.gallery img { transition: transform .9s var(--ease); }
.gallery figure:hover img { transform: scale(1.045); }
.gallery figure { overflow: hidden; }

/* ── Lightbox ─────────────────────────────────────────────── */

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(6,6,7,.96);
  display: grid; place-items: center; padding: 5vh 5vw;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%; max-height: 90vh; object-fit: contain;
  transform: scale(.94); transition: transform .45s var(--ease);
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
}
.lightbox.is-open img { transform: none; }
.lightbox__close, .lightbox__nav {
  position: absolute; background: transparent; border: 1px solid rgba(247,243,236,.28);
  color: var(--ivory); width: 52px; height: 52px; cursor: pointer;
  display: grid; place-items: center; font-size: 20px; line-height: 1;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--champagne); color: var(--obsidian); border-color: var(--champagne); }
.lightbox__close { top: 22px; right: 22px; }
.lightbox__nav.prev { left: 22px; top: 50%; translate: 0 -50%; }
.lightbox__nav.next { right: 22px; top: 50%; translate: 0 -50%; }
.lightbox__caption {
  position: absolute; bottom: 20px; left: 50%; translate: -50% 0;
  color: var(--muted-dk); font-size: .88rem; text-align: center; max-width: 70ch;
}

/* ── Films ────────────────────────────────────────────────── */

.films figure {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.films figure.in { opacity: 1; transform: none; }
.films video { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.films figure:hover video {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

/* ── Collections ──────────────────────────────────────────── */

.card {
  opacity: 0; transform: translateY(30px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
  position: relative;
}
.card.in { opacity: 1; transform: none; }
.card:hover { border-color: var(--champagne); box-shadow: 0 20px 50px rgba(11,11,12,.09); }
.collections .card:nth-child(2) { transition-delay: .1s; }
.collections .card:nth-child(3) { transition-delay: .2s; }

/* ── Trust counters ───────────────────────────────────────── */

.trust b { font-variant-numeric: tabular-nums; }

/* ── Nav scroll-spy ───────────────────────────────────────── */

.site-nav a.is-active { border-bottom-color: var(--champagne); }

/* ── Back to top ──────────────────────────────────────────── */

.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 110;
  width: 50px; height: 50px; display: grid; place-items: center;
  background: var(--obsidian); color: var(--ivory);
  border: 1px solid rgba(201,162,74,.4); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background-color .25s var(--ease);
}
.to-top.is-show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--champagne); color: var(--obsidian); }
@media (max-width: 640px) { .to-top { bottom: 96px; } }

/* ── Reduced motion: everything settles, nothing moves ────── */

@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; }
  .ambient i, .dust b { animation: none; }
  .dust { display: none; }
  .section-head .eyebrow,
  .section-head h2,
  .section-head > p { opacity: 1; transform: none; clip-path: none; transition: none; }
  .section-head .rule::after { transform: scaleX(1); }
  .section-head .rule i { transform: rotate(45deg) scale(1); }
  .gallery figure, .films figure, .card { opacity: 1; transform: none; clip-path: none; transition: none; }
  .gallery figure:hover img, .films figure:hover video { transform: none; }
  .lightbox img { transform: none; }
}

/* ── Trust strip: each stat rises in, then its number counts up ── */

.trust li {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms);
}
.trust li.in { opacity: 1; transform: none; }
.trust b { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .trust li { opacity: 1; transform: none; transition: none; }
}

/* ── Per-character headline reveal ────────────────────────
   Hand-rolled rather than using GSAP's paid SplitText plugin. */

h2 .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotateX(-55deg);
  transform-origin: 50% 100%;
  transition: opacity .5s var(--ease), transform .62s var(--ease);
  transition-delay: calc(var(--i) * 14ms);
  will-change: opacity, transform;
}
h2.chars-in .ch { opacity: 1; transform: none; }

/* The section-head choreography already fades the whole h2 — let the
   characters do that job instead so they aren't fighting. */
.section-head h2 { opacity: 1; clip-path: none; transform: none; transition: none; }

/* ── Gallery physics ──────────────────────────────────────
   The photograph used to drift vertically inside its frame on scroll.
   That worked while the tiles were free-height masonry, but the mosaic
   rows are sized to the exact pixel — any shift slides the image out of
   its own frame and leaves a black band. Hover zoom only. */

.gallery figure {
  transition: opacity .85s var(--ease), transform .5s var(--ease), clip-path .85s var(--ease);
}
.gallery figure img { transition: transform .6s var(--ease); }
.gallery figure:hover img { transform: scale(1.045); }

@media (prefers-reduced-motion: reduce) {
  h2 .ch { opacity: 1; transform: none; transition: none; }
  .gallery figure, .gallery figure img { transform: none !important; }
}

/* ── Light travelling around the frames ─────────────────────
   A single point of champagne light drifts slowly around the edge of
   every photograph and film. Built from a conic gradient masked down
   to a 1px ring, so it is one painted element per frame — no extra
   markup, no glow bleeding over the image itself.

   The animation runs from CSS alone, so pages that carry no motion
   script still get it. motion.js pauses any frame scrolled out of view —
   with 32 mosaic tiles, animating them all at once would repaint the
   page every frame whether or not anyone can see them. */

@property --frame-a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.gallery .mrow figure,
.films figure,
.film-card,
.vt-play,
.about-body .about-portrait { position: relative; }

.gallery .mrow figure::before,
.films figure::before,
.film-card::before,
.vt-play::before,
.about-body .about-portrait::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  z-index: 3; pointer-events: none;
  padding: 1px;                       /* the ring's thickness */
  background: conic-gradient(from var(--frame-a),
    rgba(195, 162, 100, .13)   0deg,
    rgba(195, 162, 100, .13)  46deg,
    rgba(233, 209, 158, .92)  76deg,
    rgba(195, 162, 100, .13) 112deg,
    rgba(195, 162, 100, .13) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: frame-light 16s linear infinite;
}

/* The films sit above a caption — the ring belongs to the picture only. */
.films figure::before,
.film-card::before { bottom: auto; aspect-ratio: 16 / 9; }

.is-unlit::before { animation-play-state: paused; }

/* Offset each frame so the lights never travel in unison. */
.gallery .mrow figure:nth-child(2n)::before   { animation-delay: -3.4s; }
.gallery .mrow figure:nth-child(3n)::before   { animation-delay: -7.1s; }
.gallery .mrow figure:nth-child(4n)::before   { animation-delay: -11.6s; }
.films figure:nth-child(2n)::before           { animation-delay: -5.2s; }
.films figure:nth-child(3n)::before           { animation-delay: -9.8s; }
.film-card:nth-child(2n)::before              { animation-delay: -5.2s; }
.film-card:nth-child(3n)::before              { animation-delay: -9.8s; }

@keyframes frame-light { to { --frame-a: 360deg; } }

/* The portrait already carries a gold border — let the ring do that job. */
.about-body .about-portrait img { border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .gallery .mrow figure::before,
  .films figure::before,
  .film-card::before,
  .vt-play::before,
  .about-body .about-portrait::before {
    animation: none;
    background: rgba(195, 162, 100, .3);
  }
}