/* ============================================================
   AJANTA — scroll-driven frame sequence with left-hand copy.

   Every rule is scoped under .ajanta. This ships as a WordPress plugin
   and drops into somebody else's theme: it must not style anything it does
   not own, and the theme must not reach in. No html/body rules for the same
   reason — the shortcode is a block on a page, not the page.
   ============================================================ */

/* Classic old-style faces throughout — a Garamond revival for the display and
   EB Garamond for text. No grotesque anywhere; the eyebrows are letterspaced
   small caps, which is how a classic specimen sets a standfirst. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

.ajanta {
  --cv-black: #000000;
  --cv-white: #f2efe9;
  --cv-grey:  #a49c8f;
  --cv-gold:  #c9a349;
  --cv-ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --cv-serif: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  --cv-text:  'EB Garamond', Garamond, Georgia, serif;
  --cv-gutter: clamp(1.5rem, 5vw, 5rem);

  position: relative;
  background: var(--cv-black);
  /* The pinned stages are full-bleed even if the theme wraps us in a column. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.ajanta *,
.ajanta *::before,
.ajanta *::after { box-sizing: border-box; }

/* ============================================================
   PRELOADER — covers the first stage only, never the whole site
   ============================================================ */
.ajanta .preloader {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--cv-black);
  display: grid;
  place-items: center;
  transition: opacity 1s var(--cv-ease), visibility 1s;
}
.ajanta .preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.ajanta .preloader__inner { width: min(360px, 66vw); text-align: center; }
.ajanta .preloader__mark {
  font-family: var(--cv-serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-variant: small-caps;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--cv-white);
  margin-bottom: 2rem;
}
.ajanta .preloader__bar {
  width: 100%;
  height: 1px;
  background: rgba(244, 242, 238, 0.10);
  position: relative;
  overflow: hidden;
}
.ajanta .preloader__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--cv-gold);
  transition: width 0.25s linear;
}

/* ============================================================
   SOUND TOGGLE — icon only, parked in the pinned hero
   ============================================================ */
.ajanta .audio {
  position: absolute;
  top: 1.5rem;
  right: var(--cv-gutter);
  z-index: 15;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  color: #fff;
  opacity: 0.5;
  transition: opacity 0.4s var(--cv-ease);
}
.ajanta .audio:hover { opacity: 1; }
.ajanta .audio__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.ajanta .audio__bars i {
  width: 2px;
  height: 3px;
  background: currentColor;
  transition: height 0.3s var(--cv-ease);
}
.ajanta .audio[aria-pressed="true"] .audio__bars i { animation: cv-eq 1s ease-in-out infinite; }
.ajanta .audio[aria-pressed="true"] .audio__bars i:nth-child(2) { animation-delay: 0.18s; }
.ajanta .audio[aria-pressed="true"] .audio__bars i:nth-child(3) { animation-delay: 0.36s; }
@keyframes cv-eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }

/* ============================================================
   HERO — pinned frame sequence
   ============================================================ */
.ajanta .hero { position: relative; }
.ajanta .hero__stage {
  position: relative;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--cv-black);
}
.ajanta .hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* transform is driven by GSAP for the cinematic push-in */
  will-change: transform;
  transform-origin: center center;
}
/* The fly-in sprites composite over the sequence canvas, so this layer keeps
   its alpha. It is switched off once the real frame takes over. */
.ajanta .hero__canvas--explode { z-index: 1; }

/* The wall shares the same stage as the sequence rather than living in its own
   pinned section — see the markup. It fades up over the finished clock, so the
   assembled clock is carried onto the wall instead of being re-introduced. */
.ajanta .hero__canvas--room {
  z-index: 1;
  opacity: 0;
}

/* Holds the left third back so the copy stays readable over the brass. */
.ajanta .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.86) 0%,
    rgba(0, 0, 0, 0.62) 22%,
    rgba(0, 0, 0, 0.18) 42%,
    transparent 58%);
}

/* premium lighting + depth over the sequence */
.ajanta .hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(255, 232, 186, 0.07) 0%, transparent 46%),
    radial-gradient(100% 100% at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.72) 100%);
  mix-blend-mode: screen;
  opacity: 0.9;
}
.ajanta .hero__grain {
  position: absolute;
  inset: -50%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: cv-grain 0.7s steps(4) infinite;
}
@keyframes cv-grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(3%, 3%); }
}

/* ============================================================
   COPY — always on the left, one scene visible at a time
   ============================================================ */
.ajanta .copy {
  position: absolute;
  left: var(--cv-gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: min(36ch, 44vw);
  pointer-events: none;
  display: grid;
}
/* Scenes share one cell so they cross-fade in place. */
.ajanta .copy__scene {
  grid-area: 1 / 1;
  opacity: 0;
}
.ajanta .copy__eyebrow {
  margin: 0 0 1.4rem;
  padding: 0;
  font-family: var(--cv-text);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant: small-caps;
  letter-spacing: 0.32em;
  color: var(--cv-gold);
}
.ajanta .copy__title {
  margin: 0 0 1.4rem;
  padding: 0;
  font-family: var(--cv-serif);
  font-weight: 300;
  font-size: clamp(2.3rem, 1rem + 4vw, 4.75rem);
  line-height: 1.02;
  /* Old-style faces are drawn to sit tight; almost no tracking needed. */
  letter-spacing: -0.005em;
  color: var(--cv-white);
  text-transform: none;
}
/* each span is one mask-reveal line */
.ajanta .copy__title span {
  display: block;
  overflow: hidden;
}
.ajanta .copy__title span > i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
}
.ajanta .copy__body {
  margin: 0;
  padding: 0;
  font-family: var(--cv-text);
  font-weight: 400;
  /* Garamond runs small for its point size — set it a step larger than a
     grotesque would be at the same optical weight. */
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.28rem);
  line-height: 1.62;
  color: var(--cv-grey);
  max-width: 34ch;
}

/* ============================================================
   RESPONSIVE
   Portrait letterboxes the 16:9 frame into a band, so the copy moves out of
   the image and sits beneath it rather than fighting it for contrast.
   ============================================================ */
@media (max-width: 860px), (orientation: portrait) {
  /* The band is lifted to ~35% of the height (see PORTRAIT_LIFT), so the copy
     starts just under it rather than being pinned to the bottom with a void
     between. Anchored to the top, not the bottom, so it tracks the band. */
  .ajanta .copy {
    top: 52%;
    bottom: auto;
    transform: none;
    width: calc(100% - var(--cv-gutter) * 2);
  }
  .ajanta .copy__body { max-width: none; }
  /* The type sits on black here, not on the art, so the scrim only has to
     cover the lower half rather than crush the whole frame. */
  .ajanta .hero__scrim {
    background: linear-gradient(to top,
      rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.5) 40%, transparent 62%);
  }
  .ajanta .copy__title { font-size: clamp(2rem, 8.5vw, 3rem); }
  .ajanta .copy__body { font-size: 1.02rem; line-height: 1.55; }
  .ajanta .audio { top: 1rem; }
}

/* Landscape on a phone: the band is short, keep the copy off the art. */
@media (max-height: 520px) and (orientation: landscape) {
  .ajanta .copy__title { font-size: clamp(1.4rem, 3.4vw, 2.2rem); }
  .ajanta .copy__body { font-size: 0.95rem; }
  .ajanta .copy__eyebrow { margin-bottom: 0.7rem; }
}

/* ============================================================
   REDUCED MOTION
   The sequence still renders and still scrubs; ambient motion stops.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ajanta .hero__grain,
  .ajanta .audio__bars i { animation: none !important; }
  /* GSAP writes inline styles, so this needs !important to win. */
  .ajanta .copy__title span > i { transform: none !important; }
}