/* ============================================================
   BY MARAM — the opening

   Three openings, chosen with ?intro=rise|reflection|liquid (rise is
   the default). Each is drawn into one full-screen canvas above the
   real page, so the hand-off is the page itself rather than a picture
   of it. intro.js and sea.js own the timing; this sheet only holds the
   frame, the wordmark, the letterbox, the skip control and the logo's
   hover light.
   ============================================================ */

body.is-intro{ overflow:hidden }

.intro{
  position:fixed; inset:0; z-index:800;
  pointer-events:auto;
  transition:opacity .7s var(--e-out), visibility .7s;
}
.intro.is-done{ opacity:0; visibility:hidden; pointer-events:none }
.intro__stage{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .35s ease-out }
.intro.is-playing .intro__stage{ opacity:1 }

/* BY MARAM in the photograph's own engraved gold. Light reveals it left
   to right (--reveal), then one shine crosses it (--shine). */
.intro__lockup{
  position:absolute; pointer-events:none; opacity:0;
  filter:drop-shadow(0 0 18px rgba(255,244,222,.55));
  will-change:opacity, transform;
}
.intro__lockup img{
  display:block; width:100%; height:auto;
  -webkit-mask:linear-gradient(90deg, #000 var(--reveal, 0%), transparent calc(var(--reveal, 0%) + 14%));
          mask:linear-gradient(90deg, #000 var(--reveal, 0%), transparent calc(var(--reveal, 0%) + 14%));
}
.intro__lockup i{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  -webkit-mask:url(/assets/img/by-maram-gold-1920.webp) center / 100% 100% no-repeat;
          mask:url(/assets/img/by-maram-gold-1920.webp) center / 100% 100% no-repeat;
  background:linear-gradient(104deg, transparent calc(var(--shine, 115%) - 9%),
    rgba(255,250,232,.95) var(--shine, 115%), transparent calc(var(--shine, 115%) + 9%));
}

/* The letterbox: a film's frame, open by the time the page arrives. */
.intro__bars{ --bar:9.5vh }
.intro__bars i{
  position:absolute; z-index:2; left:0; right:0; height:calc(var(--bar) * (1 - var(--open, 0)));
  background:#0d0906; pointer-events:none;
}
@media (max-aspect-ratio: 1/1){ .intro__bars{ --bar:6.5vh } }
.intro__bars i:first-child{ top:0 }
.intro__bars i:last-child{ bottom:0 }

.intro__skip{
  position:absolute; z-index:3; right:clamp(1rem, 3vw, 2.2rem); bottom:clamp(.6rem, 2.4vh, 1.6rem);
  font-size:.62rem; letter-spacing:var(--tr-wide); text-transform:uppercase;
  color:rgba(255,244,226,.85); opacity:.7; padding:.6rem .2rem;
  transition:opacity .3s, color .3s;
}
.intro__skip:hover,
.intro__skip:focus-visible{ opacity:1; color:var(--gold-lt) }

/* The page arriving: the portrait settles and the copy rises once, in
   order, so the opening ends on a composed first screen. */
body.intro-arrive .atelier__copy > *{
  animation:introRise 1.15s var(--e-out) both;
}
body.intro-arrive .atelier__copy > :nth-child(2){ animation-delay:.08s }
body.intro-arrive .atelier__copy > :nth-child(3){ animation-delay:.18s }
body.intro-arrive .atelier__copy > :nth-child(4){ animation-delay:.28s }
body.intro-arrive .atelier__copy > :nth-child(5){ animation-delay:.38s }
@keyframes introRise{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
body.is-intro .atelier__copy{ opacity:0 }

/* ---------- The logo's light ----------
   A specular band clipped to the monogram's own alpha follows the
   pointer across the metal; a finger swiping across it does the same.
   Sparkles are four-point stars, born where the light passes. */
.glint{ position:relative; display:block; line-height:0; font-style:normal }
.nav__mark .nav__ma{ height:2.7rem; width:auto }
@media (max-width: 760px){ .nav__mark .nav__ma{ height:2.25rem } }
.glint__shine{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  -webkit-mask:var(--glint-src) center / contain no-repeat;
          mask:var(--glint-src) center / contain no-repeat;
  background:linear-gradient(104deg,
    transparent 38%, rgba(255,246,214,.0) 41%, rgba(255,250,232,.95) 50%,
    rgba(255,240,196,.0) 59%, transparent 62%) no-repeat;
  background-size:320% 100%;
  background-position:var(--sx, 100%) 0;
  mix-blend-mode:screen;
  transition:opacity .35s var(--e-out);
}
.glint.is-lit .glint__shine{ opacity:1 }
.glint.is-sweep .glint__shine{ opacity:1; animation:glintSweep 1.25s var(--e-out) both }
@keyframes glintSweep{ from{ background-position:100% 0 } to{ background-position:0% 0 } }

.glint__spark{
  position:absolute; width:var(--s, 9px); height:var(--s, 9px);
  margin:calc(var(--s, 9px) / -2) 0 0 calc(var(--s, 9px) / -2);
  pointer-events:none;
  background:radial-gradient(circle, #fff 0 18%, rgba(255,236,180,.9) 30%, transparent 62%);
  clip-path:polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  animation:spark .75s var(--e-out) both;
  mix-blend-mode:screen;
}
@keyframes spark{
  0%  { opacity:0; transform:scale(.2) rotate(0deg) }
  35% { opacity:1; transform:scale(1) rotate(40deg) }
  100%{ opacity:0; transform:scale(.4) rotate(90deg) }
}

/* The call to action's stars: a fine four-point star in a soft halo that
   opens, turns a little and closes again. */
.sparkle{
  position:absolute; z-index:2; width:var(--s, 8px); height:var(--s, 8px);
  margin:calc(var(--s, 8px) / -2) 0 0 calc(var(--s, 8px) / -2);
  pointer-events:none; mix-blend-mode:screen;
  animation:sparkle 1.15s var(--e-out) both;
}
.sparkle::before{
  content:""; position:absolute; inset:-70%; border-radius:50%;
  background:radial-gradient(circle, rgba(255, 246, 222, .75), rgba(255, 232, 180, 0) 62%);
}
.sparkle::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle, #fff 0 22%, rgba(255, 244, 214, .95) 34%, rgba(255, 230, 170, 0) 72%);
  clip-path:polygon(50% 0, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0 50%, 45% 45%);
}
@keyframes sparkle{
  0%   { opacity:0; transform:scale(.1) rotate(var(--r, 0deg)) }
  40%  { opacity:1; transform:scale(1) rotate(calc(var(--r, 0deg) + 35deg)) }
  100% { opacity:0; transform:scale(.3) rotate(calc(var(--r, 0deg) + 80deg)) }
}

@media (prefers-reduced-motion: reduce){
  .intro{ transition:opacity .4s linear }
  body.intro-arrive .atelier__copy > *{ animation:none }
  .glint.is-sweep .glint__shine{ animation:none }
  .glint__spark, .sparkle{ display:none }
}