/* ==========================================================================
   Home page
   1. Loader          5. Services
   2. Hero            6. Featured templates
   3. Showreel        7. Call to action
   4. About + facts   8. Responsive
   ========================================================================== */


/* 1. Loader ------------------------------------------------------------------ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: var(--dark);
  color: var(--white);
  clip-path: inset(0 0 0 0);   /* js/home.js shrinks this from the bottom to wipe the panel away */
}
.loader.is-gone { display: none; }

.loader__name .char {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  animation: loader-char 0.9s ease forwards;
  animation-delay: calc(0.2s + var(--i) * 35ms);
}
@keyframes loader-char { to { opacity: 1; filter: blur(0); } }

.loader__count { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

.loader__stack {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(600px, 80vw);
  aspect-ratio: 16 / 10;
  transform: translate(-50%, -50%);
}
.loader__stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateY(1000px);   /* start below the screen; js/home.js moves them in */
  will-change: transform;
}


/* 2. Hero --------------------------------------------------------------------- */

.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; will-change: transform; }
.hero__bg img { width: 100%; height: 100%; }
.hero__shade {
  position: absolute;
  inset: 16.5% 0 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.09) 25%, rgba(0, 0, 0, 0.31) 50%, rgba(0, 0, 0, 0.62) 76%, #000 100%);
}

.hero__content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 698px;
  transform: translate(-50%, -50%);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero__badge svg { width: 8px; height: 12px; }

.hero__title { display: block; color: var(--white); }
.hero__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96px;
}
.hero__row:nth-child(2) { justify-content: flex-start; gap: 16px; padding-left: 3px; }

/* the box the showreel video starts in */
.hero__video-slot { flex: none; width: 142px; height: 80px; }

/* 3D Framer logo, gently rocking */
.hero__logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  animation: logo-rock 5s ease-in-out infinite alternate;
}
@keyframes logo-rock {
  from { transform: perspective(400px) rotateY(-28deg) rotateX(6deg); }
  to   { transform: perspective(400px) rotateY(28deg) rotateX(-6deg); }
}

.hero__available {
  margin-top: 16px;
  text-align: right;
  color: var(--white);
}
.hero__available span { color: rgb(109, 109, 109); }

.hero__intro {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  text-align: center;
  color: var(--paper-muted);
}
.hero__intro span { color: var(--white); }

.hero__clock { position: absolute; left: var(--gutter); bottom: 40px; color: var(--white); }

.scroll-hint {
  position: absolute;
  right: var(--gutter);
  bottom: 40px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 90px;
}
.scroll-hint__text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--paper-muted);
}
.scroll-hint__text b { font-weight: 300; color: var(--white); }
.scroll-hint__line {
  position: relative;
  width: 2px;
  height: 90px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
}
.scroll-hint__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  animation: scroll-line 2.4s var(--ease) infinite;
}
@keyframes scroll-line {
  0%   { transform: translateY(-100%); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* --hero-fade goes 1 → 0 as you scroll out of the hero (js/home.js).
   --intro-in goes 0 → 1 when the loader uncovers the page. */
.hero__clock,
.scroll-hint { opacity: var(--hero-fade, 1); }
.hero__intro { opacity: calc(var(--intro-in, 1) * var(--hero-fade, 1)); }

/* While the loader plays, the intro line waits below its spot (js/home.js floats it up) */
.is-loading .hero__intro { --intro-in: 0; transform: translateY(24px); }


/* 3. Showreel -------------------------------------------------------------------
   .reel-video is placed by js/home.js: it starts in .hero__video-slot and ends
   covering the .playreel section. */

.reel-video {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  overflow: hidden;
  will-change: transform;
}
.reel-video video { width: 100%; height: 100%; }

.playreel {
  position: relative;
  height: 100vh;
  min-height: 600px;
}
.playreel__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.08) 100%);
}
.playreel__content {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.playreel__row {
  display: flex;
  align-items: center;
  gap: 40px;
}
.playreel__word { color: var(--white); will-change: transform; }
.playreel__time,
.playreel__year { width: 658px; max-width: 100%; color: var(--paper); }
.playreel__year { text-align: right; }
.playreel__button { width: 180px; height: 80px; padding: 0; }
.playreel__button svg { width: 24px; height: 24px; }

/* full-screen showreel player */
.reel-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px var(--gutter);
  background: rgba(0, 0, 0, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s 0.5s;
}
.reel-modal.is-open { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease); }
.reel-modal video { width: 100%; max-height: 100%; object-fit: contain; }
.reel-modal__close { position: absolute; top: 32px; right: var(--gutter); }


/* 4. About + facts --------------------------------------------------------------- */

.about { padding: 200px var(--gutter); }
.about__top,
.facts {
  display: grid;
  grid-template-columns: minmax(0, 440fr) minmax(0, 900fr);
  gap: 20px;
}
.about__video { padding-top: 16px; }
.about__video video {
  width: 220px;
  height: 124px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--ease-out) 0.2s;
}
.about__video.is-visible video { clip-path: inset(0 0 0 0); }
.about__video[data-reveal] { opacity: 1; transform: none; }
.about__text { display: grid; gap: 16px; }

.facts { margin-top: 200px; height: 200px; }
.facts__nav { display: flex; gap: 8px; align-self: end; }
.facts__nav .btn svg { width: 20px; height: 20px; }

.facts__slides { position: relative; }
.fact {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-template-rows: 20px 1fr;
  row-gap: 16px;
  pointer-events: none;
}
.fact__label { grid-column: 1 / -1; }
.fact__number { align-self: end; white-space: nowrap; }
.fact__text { align-self: end; }
.fact > * {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(6px);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease-out), filter 0.5s var(--ease);
}
.fact.is-active { pointer-events: auto; }
.fact.is-active > * { opacity: 1; transform: none; filter: none; }
.fact.is-active .fact__number { transition-delay: 0.08s; }
.fact.is-active .fact__text { transition-delay: 0.16s; }


/* 5. Services ---------------------------------------------------------------------
   300vh tall; .services__sticky stays on screen while you scroll through it. */

.services { height: 300vh; }
.services__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  padding: 0 var(--gutter);
}
.services__info {
  position: relative;
  width: calc(50% - var(--gutter) - 87px);
  height: 100%;
}

.service {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 31vh 0 40px;
  pointer-events: none;
}
.service.is-active { pointer-events: auto; }
.service__head { display: grid; gap: 16px; }
.service__body {
  display: grid;
  grid-template-columns: 207px 1fr;
  gap: 24px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.service__meta { display: grid; align-content: start; }
.service__meta dd { margin: 8px 0 24px; }
.service__text { max-width: 322px; }
.service__price {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
}
.service__price .light { margin-bottom: 8px; }

/* switching animation */
.service .label,
.service h3,
.service__body,
.service__price > div {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease-out), filter 0.45s var(--ease);
}
.service .btn { opacity: 0; transition: opacity 0.45s var(--ease); }
.service.is-active .label,
.service.is-active h3,
.service.is-active .service__body,
.service.is-active .service__price > div,
.service.is-active .btn { opacity: 1; transform: none; filter: none; }
.service.is-active h3 { transition-delay: 0.05s; }
.service.is-active .service__body { transition-delay: 0.1s; }
.service.is-active .service__price > div { transition-delay: 0.15s; }

.services__media {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: calc(50% - 8px);
  overflow: hidden;
  border-radius: 40px;
  background: var(--dark);
}
.services__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.7s var(--ease), transform 1.2s var(--ease-out);
}
.services__media video.is-active { opacity: 1; transform: none; }
.services__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.82) 100%);
}
.services__nav {
  position: absolute;
  right: 40px;
  bottom: 40px;
  display: grid;
  gap: 4px;
  justify-items: end;
  color: var(--paper);
}
.services__nav a {
  display: flex;
  align-items: center;
  gap: 4px;
}
.services__nav a::after {
  content: "";
  width: 10px;
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.services__nav a.is-active::after { transform: none; }


/* 6. Featured templates -------------------------------------------------------------
   Each .featured__item is one screen tall and clips its content (overflow: clip).
   Inside, .featured__pin is sticky, so the circle and name stay in the middle of
   the screen while the item's window moves: the next template wipes in from below. */

.featured { position: relative; }

/* .featured__ui covers the whole section; its child sticks to the screen */
.featured__ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  color: var(--white);
}
.featured__ui-inner {
  position: sticky;
  top: 0;
  height: 100vh;
}
.featured__ui a { pointer-events: auto; }
.featured__label {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
}
.featured__all { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); }
.featured__all:hover { transform: translateX(-50%) scale(1.03); }

.featured__rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 696px;
  height: 696px;
  transform: translate(-50%, -50%);
}
.featured__rings svg { width: 100%; height: 100%; overflow: visible; }
.featured__rings .arc { fill: none; stroke: var(--white); stroke-width: 1.5; opacity: 0.2; transition: opacity 0.5s var(--ease); }
.featured__rings .num { fill: var(--white); font-size: 12px; opacity: 0.2; transition: opacity 0.5s var(--ease); }
.featured__rings .is-active { opacity: 1; }

.featured__item {
  position: relative;
  height: 100vh;
  overflow: clip;
}
.featured__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

/* The sticky stage lives in a taller track around the item: it starts one
   screen early (so it is already in place when the item wipes in) and ends one
   screen late (so it stays while the item wipes out). The first item has no
   template before it, so it simply scrolls in; the last one scrolls out. */
.featured__pin {
  position: absolute;
  top: -100vh;
  left: 0;
  right: 0;
  height: 300vh;
}
.featured__item:first-child .featured__pin { top: 0; height: 200vh; }
.featured__item:last-child .featured__pin { height: 200vh; }
.featured__stage {
  position: sticky;
  top: 0;
  height: 100vh;
}

.featured__circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 450px;
  height: 450px;
  overflow: hidden;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.featured__circle img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.6s var(--ease); }
.featured__circle--swap img + img { opacity: 0; }
.featured__circle--swap:hover img + img { opacity: 1; }

.featured__name {
  position: absolute;
  right: var(--gutter);
  top: calc(50% - 40px);
  text-align: right;
  color: var(--white);
  mix-blend-mode: difference;
  pointer-events: none;
}
.featured__name .t-12 { margin-top: 8px; color: var(--paper-muted); }


/* 7. Call to action --------------------------------------------------------------------- */

.cta {
  position: relative;
  height: 990px;
  padding: 0 var(--gutter) 72px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.cta__video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 894px;
  -webkit-mask-image: linear-gradient(#000 85%, transparent);
  mask-image: linear-gradient(#000 85%, transparent);
}
.cta__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}


/* 8. Responsive --------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .hero__content { width: 600px; }
  .hero__title { font-size: 72px; line-height: 80px; }
  .hero__row { height: 80px; }
  .about__top, .facts { grid-template-columns: 240px 1fr; }
  .fact { grid-template-columns: 1fr 280px; }
  .services__info { width: calc(50% - var(--gutter) - 24px); }
  .service__body { grid-template-columns: 1fr; gap: 16px; }
  .featured__rings { transform: translate(-50%, -50%) scale(0.85); }
}

@media (max-width: 809px) {
  /* hero */
  .hero__content { width: auto; left: var(--gutter); right: var(--gutter); transform: translateY(-50%); }
  .hero__title { font-size: 44px; line-height: 48px; }
  .hero__row { height: 48px; }
  .hero__row:nth-child(2) { gap: 8px; }
  .hero__video-slot { width: 72px; height: 40px; }
  .hero__logo { width: 40px; height: 40px; }
  .hero__intro { bottom: 96px; padding: 0 var(--gutter); }
  .hero__intro br { display: none; }
  .scroll-hint { display: none; }
  .hero__clock { display: none; }

  /* showreel */
  .playreel__row { gap: 12px; }
  .playreel__word { font-size: 44px; line-height: 48px; }
  .playreel__button { width: 88px; height: 44px; }
  .playreel__time, .playreel__year { width: 100%; padding: 0 var(--gutter); }

  /* about */
  .about { padding: 120px var(--gutter); }
  .about__top, .facts { grid-template-columns: 1fr; }
  .about__video video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .facts { margin-top: 80px; height: auto; }
  .facts__nav { order: 2; }
  .facts__slides { height: 300px; }
  .fact { grid-template-columns: 1fr; grid-template-rows: 20px auto auto; align-content: start; }
  .fact__number { font-size: 120px; line-height: 112px; }

  /* services: still pinned; text on top, video in the middle, price at the bottom */
  .services__info { width: auto; }
  .service { padding: 96px 0 20px; }
  .service h3 { font-size: 40px; line-height: 44px; }
  .service__body { grid-template-columns: 105px 1fr; gap: 16px; margin-top: 36px; }
  .service__price .t-56 { font-size: 40px; line-height: 44px; }
  .services__media { top: 46%; bottom: 124px; left: var(--gutter); right: var(--gutter); width: auto; border-radius: 16px; }
  .services__nav { display: none; }

  /* featured */
  .featured__rings { transform: translate(-50%, -50%) scale(0.52); }
  .featured__label { left: 0; right: 0; top: 96px; transform: none; text-align: center; }
  .featured__circle { width: 240px; height: 240px; }
  .featured__name { left: var(--gutter); top: calc(50% + 160px); text-align: center; }
  .featured__name .t-72 { font-size: 32px; line-height: 36px; }

  /* cta */
  .cta { height: 640px; padding-bottom: 72px; }
  .cta__video { height: 520px; }
  .cta__content h2 { font-size: 44px; line-height: 48px; }
}