/* ==========================================================================
   zejneba.com — Home page: hero section + intro animation
   --------------------------------------------------------------------------
   Uses tokens.css and components.css (navigation, buttons).

   1. Page frame
   2. Hero layout
   3. Work screens on a turning wheel
   4. Intro animation (only while <html> has the .intro class)
   5. Responsive / reduced motion
   ========================================================================== */


/* 1. Page frame
   ========================================================================== */

body {
  background: #000; /* the intro screen color, shows before the page rises */
}

.page {
  position: relative;
  z-index: 1;
  /* flow-root keeps the footer's bottom margin white instead of showing the dark body */
  display: flow-root;
  min-height: 100vh;
  background: var(--base-white);
}

/* The nav (.page-nav, css/components.css) fades in during the intro */
.page-nav {
  transition:
    opacity 0.7s var(--ease-out),
    translate 0.9s var(--ease-out),
    box-shadow 0.8s var(--ease-out); /* lighter shadow once scrolled (components.css) */
}


/* 2. Hero layout
   ========================================================================== */

.hero {
  /* Wheel size, card size, and where the top card sits */
  --orbit-r: max(58vw, 470px);
  --orbit-card-w: clamp(190px, 18vw, 360px); /* images in assets/work/orbit are 720px: 2× the widest card */
  --orbit-card-h: calc(var(--orbit-card-w) * 0.72);
  --orbit-gap: 0.2; /* space between cards, as a share of a card's width (read by hero.js) */
  --orbit-top: calc(104px + var(--orbit-card-h) / 2); /* center of the top card, clear of the nav */
  --orbit-speed: 160s; /* one full turn */

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 24px clamp(104px, 17vh, 168px);
  overflow: clip;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Heading/Bold/64, scaled down on small screens */
.hero__title {
  max-width: 831px;
  margin-bottom: 10px;
  font-size: clamp(40px, 3.6vw + 10px, 64px);
  line-height: 1.0625;
  text-wrap: balance;
}

/* Words are wrapped by hero.js so they can animate one after another */
.hero__title .word {
  display: inline-block;
  transition:
    opacity 0.7s var(--ease-out),
    filter 0.7s var(--ease-out),
    translate 0.9s var(--ease-out);
}

.hero__text {
  max-width: 581px;
  margin-bottom: 40px;
  color: var(--neutral-muted);
  transition: opacity 0.8s var(--ease-out), translate 0.8s var(--ease-out);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.hero__cta {
  transition:
    opacity 0.8s var(--ease-out),
    translate 0.8s var(--ease-out),
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}


/* 3. Work screens on a turning wheel
   --------------------------------------------------------------------------
   The wheel is a big circle centered below the headline. Its top arc runs
   from one edge of the screen to the other; the rest of it is clipped away.
   Each screen sits on the circle, tilted along it, and the whole circle
   turns forever. Every card turns on its own around the circle's center
   (all in step): turning the circle as one huge layer made the browser draw
   the screens coming into view at low resolution.
   ========================================================================== */

/* Only the top half of the wheel is shown: the frame ends at the circle's
   middle line and fades out just above it, so cards never cross the text */
.orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: min(100%, var(--orbit-top) + var(--orbit-r));
  z-index: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 140px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 140px), transparent);
  pointer-events: none;
  transition: opacity 1s ease, translate 1.6s var(--ease-out-expo), scale 1.6s var(--ease-out-expo);
}

/* The circle itself; its center is the turning point */
.orbit__ring {
  position: absolute;
  top: calc(var(--orbit-top) + var(--orbit-r));
  left: 50%;
  width: calc(var(--orbit-r) * 2);
  height: calc(var(--orbit-r) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
  translate: -50% -50%;
}

@keyframes orbit-turn {
  to { rotate: 360deg; }
}

/* Each card is centered on the circle's middle, then turned to its angle
   (--a, set by hero.js) and pushed out to the edge. The turning (rotate)
   happens around that same middle, so the cards travel along the circle. */
.orbit__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--orbit-card-w);
  height: var(--orbit-card-h);
  margin: calc(var(--orbit-card-h) / -2) 0 0 calc(var(--orbit-card-w) / -2);
  transform: rotate(var(--a, 0deg)) translateY(calc(var(--orbit-r) * -1));
  animation: orbit-turn var(--orbit-speed) linear infinite;
}

.orbit__card {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #eeeeea;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
  pointer-events: auto;
  transition: scale 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.orbit__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* Hover: the wheel stops and the card comes forward a little */
@media (hover: hover) {
  .orbit__ring:has(.orbit__card:hover) .orbit__item {
    animation-play-state: paused;
  }

  .orbit__card:hover {
    scale: 1.08;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  }
}


/* 4. Intro animation
   --------------------------------------------------------------------------
   hero.js adds stage classes to <html> one after another:

     .stage-dot      a small white dot appears in the middle of the black screen
     .stage-sheet    the dot opens up to fill the screen: it is the white page itself
     .stage-content  nav, eyebrow and headline come in
     .stage-wheel    the wheel of work screens rises into place, then text and CTA

   Each element below says how it looks *before* its stage. Once the stage
   class is added, that rule stops matching and the element transitions to
   its normal style. When everything is done, .intro is removed.
   ========================================================================== */

/* -- Black intro screen -- */

.intro-screen {
  display: none;
}

.intro .intro-screen {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  background: #000;
  transition: background-color 0.9s var(--ease-out);
}

/* While the dot opens up, the black fades to white too, so there is no
   hard black-and-white edge sweeping across the screen */
.intro body {
  transition: background-color 0.9s var(--ease-out);
}

.intro.stage-sheet body,
.intro.stage-sheet .intro-screen {
  background: var(--base-white);
}

/* -- The white page: a dot in the middle of the screen that opens up --
      (50vh, not 50%: the page is much taller than the screen) */

.intro {
  overflow: hidden; /* no scrolling while the intro plays */
}

.intro .page {
  clip-path: circle(80vmax at 50% 50vh);
  transition: clip-path 1.1s cubic-bezier(0.33, 0, 0.15, 1); /* gentle start, long soft finish */
}

.intro:not(.stage-dot) .page {
  clip-path: circle(0 at 50% 50vh);
}

.intro.stage-dot:not(.stage-sheet) .page {
  clip-path: circle(4px at 50% 50vh);
  transition-duration: 0.3s;
  transition-timing-function: var(--ease-out);
}

/* -- Navigation -- */

.intro:not(.stage-content) .page-nav {
  opacity: 0;
  translate: -50% -24px;
}

/* -- Headline -- */

.intro .hero__title .word {
  transition-delay: calc(0.2s + var(--i) * 0.06s);
}

.intro:not(.stage-content) .hero__title .word {
  opacity: 0;
  filter: blur(10px);
  translate: 0 0.3em;
}

/* -- Supporting text + CTA (come in while the wheel rises) -- */

.intro .hero__text {
  transition-delay: 0.35s;
}

.intro .hero__cta {
  transition-delay: 0.5s;
}

.intro .hero__cta + .hero__cta {
  transition-delay: 0.6s;
}

.intro:not(.stage-wheel) .hero__text,
.intro:not(.stage-wheel) .hero__cta {
  opacity: 0;
  translate: 0 14px;
}

/* -- Wheel: waits hidden (a bit lower and smaller) and still, so it always
      rises in with the data-start screen on top, then starts turning -- */

.intro:not(.stage-wheel) .orbit {
  opacity: 0;
  translate: 0 12vh;
  scale: 0.94;
}

.intro:not(.stage-wheel) .orbit__item {
  animation-play-state: paused;
}


/* 5. Responsive / reduced motion
   ========================================================================== */

@media (max-width: 860px) {
  .hero {
    --orbit-r: max(64vw, 230px);
    --orbit-card-w: clamp(125px, 33vw, 190px);
    --orbit-top: calc(100px + var(--orbit-card-h) / 2);
    --orbit-gap: 0.35;

    /* No full-screen height on phones and tablets: the text starts right under
       the lowest screens on the wheel (where the arc meets the screen edge),
       so there is no empty band between the screens and the headline */
    min-height: 0;
    justify-content: flex-start;
    padding-top: calc(var(--orbit-top) + var(--orbit-r) * 0.36 + var(--orbit-card-h) * 0.7);
    padding-bottom: 64px;
  }

  .hero__text {
    margin-bottom: 32px;
    font-size: 15px;
    line-height: 24px;
  }
}

@media (max-width: 600px) {
  .hero {
    padding-inline: var(--grid-margin);
  }

  /* Keeps "Products Grow" inside the grid on small phones */
  .hero__title {
    font-size: min(40px, 10.6vw);
  }

  .hero__text {
    margin-bottom: 28px;
  }

  /* Phones: let the sentence wrap on its own */
  .hero__break {
    display: none;
  }

  /* Both buttons the full width of the grid */
  .hero__actions {
    flex-direction: column;
    align-self: stretch;
    gap: 10px;
  }
}

/* Reduced motion: no intro, the wheel stands still */
@media (prefers-reduced-motion: reduce) {
  .orbit__item {
    animation: none;
  }
}