/* ============================================================
   ARLO — Hero (component)
   Editorial, image-focused, RTL-first. Flat scrim, no gradient washes;
   the one exception is the frosted glass pane behind the service sign in
   the brand lockup, which exists to keep that label legible over the photo.
   ============================================================ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--masthead-h));
  min-height: calc(100svh - var(--masthead-h));
  color: var(--color-accent-ink);
  overflow: hidden;
}

/* ---------- Visual ---------- */
.hero__media {
  position: absolute;
  inset: 0;
  /* Solid espresso fallback behind the eager LCP image — on-brand first
     paint while the photo decodes. */
  background: var(--color-ink);
}
.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(22, 16, 10, 0.52); /* flat scrim keeps the text readable */
}

/* ---------- ARLO brand lockup (wordmark + service sign) ----------
   Large wordmark over the photo's dark counter with the live service sign
   held well below it, centred on the axis of the hero's own half — the
   column the reading side leaves free. */
.hero__brand {
  position: absolute;
  /* The middle of that half, so the mark fills it and the two sides face
     each other instead of the mark hugging the screen edge. */
  left: 25%;
  /* A step below the box's own centre: the sign hangs past the wordmark's
     line box, so the pair only reads as centred once the lockup sits low. */
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: 1; /* above the photo + scrim, below the hero content */
  display: flex;
  flex-direction: column;
  align-items: center; /* the sign centres under the wordmark */
  gap: clamp(2rem, 16vh, 8rem);
  direction: ltr; /* A R L O always reads left to right */
  user-select: none;
}

.hero__wordmark {
  font-family: var(--font-hero-mark);
  /* The mark is the opening image: as large as its half of the screen will
     carry, but always ONE line. The width key leads; the height key
     tightens it on a short laptop so the lockup stays inside one view. */
  position: relative; /* the anchor for the halo behind the word */
  transform-origin: 50% 58%; /* the mark breathes up from just under its baseline */
  font-size: clamp(3rem, min(12vw, 24vh), 15rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
  margin-inline-end: -0.06em; /* balance the trailing tracking */
  margin-block: -0.25em;
  white-space: nowrap;
  text-transform: uppercase;
  background-image:
    linear-gradient(98deg, rgba(255, 251, 242, 0) 46%, rgba(255, 251, 242, 0.16) 48.5%, rgba(255, 251, 242, 0.42) 50%, rgba(255, 251, 242, 0.16) 51.5%, rgba(255, 251, 242, 0) 54%),
    linear-gradient(165deg, #fffdf6 9%, #f5e5c9 35%, #e3c096 63%, #cd9a68 85%);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Arrives with the veil, then breathes as ONE piece, halo and warm light
     included: at this size the letters must never move apart. */
  animation:
    hero-mark-in var(--dur-reveal) var(--ease-out) both,
    hero-mark-float var(--dur-steam) var(--ease-in-out) 1.4s infinite alternate,
    hero-mark-sheen var(--dur-sheen) var(--ease-in-out) 1s infinite;
}

.hero__wordmark::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255, 238, 210, 0.18), rgba(255, 238, 210, 0) 62%),
    radial-gradient(circle, rgba(217, 167, 126, 0.26), rgba(217, 167, 126, 0) 68%);
  animation: hero-mark-bloom var(--dur-glow) var(--ease-in-out) infinite alternate;
}

@keyframes hero-mark-in {
  from { opacity: 0; transform: translateY(1.6rem) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* The mark rises and settles on the ambient beat, carrying its halo and its
   warm light with it. */
@keyframes hero-mark-float {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-0.28rem) scale(1.01); }
}

@keyframes hero-mark-bloom {
  from { opacity: 0.35; transform: scale(0.94); }
  to   { opacity: 0.95; transform: scale(1.06); }
}

@keyframes hero-mark-sheen {
  0%   { background-position: 92% 0, 0 0; }
  30%  { background-position: 6% 0, 0 0; }
  100% { background-position: 6% 0, 0 0; }
}

/* ---------- Service sign ----------
   A two-line plaque on one pane of glass: the state word with its pulsing
   service dot, a hairline carrying a slow light sweep, and RIGHT NOW
   beneath it. js/site.js writes the state word (OPEN / CLOSE) and toggles
   .is-open / .is-closed; the dot and the word's colour follow that state.
   The glass (frosted slab, lit rim, bevels, a light pass, outer shadows)
   keeps both lines legible over any part of the photo. */
.hero__sign {
  position: relative;
  isolation: isolate; /* keeps the glass behind this plaque's own content */
  overflow: hidden;   /* trims the slab, its rim and the shine to the plaque */
  display: grid;
  justify-items: center;
  gap: clamp(0.5rem, 1.3vh, 0.75rem);
  padding: clamp(1rem, 2.5vh, 1.5rem) clamp(1.7rem, 4vw, 3rem);
  border-radius: 14px;
  translate: 0 clamp(1rem, 3.6vh, 2.6rem);
  font-family: var(--font-latin);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  text-shadow: 0 1px 3px rgba(16, 10, 6, 0.55);
  /* Lands after the wordmark has finished typing itself out. */
  opacity: 0;
  animation: hero-rise var(--dur-reveal) var(--ease-out) 1.05s forwards;
}

/* The frosted slab behind the label. */
.hero__sign::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  /* A broad diagonal stroke of light over a dark smoked tint, so what
     sits behind the label is calmed down but never hidden. */
  background:
    linear-gradient(
      115deg,
      rgba(253, 249, 242, 0.16) 0%,
      rgba(253, 249, 242, 0.05) 42%,
      rgba(253, 249, 242, 0) 66%
    ),
    linear-gradient(
      180deg,
      rgba(22, 16, 10, 0.6) 0%,
      rgba(22, 16, 10, 0.42) 100%
    );
  border: 1px solid rgba(253, 249, 242, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(253, 249, 242, 0.32),
    inset 0 -1px 0 rgba(217, 167, 126, 0.18),
    0 18px 34px -22px rgba(0, 0, 0, 0.78),
    0 0 30px -10px rgba(217, 167, 126, 0.3);
  backdrop-filter: blur(9px) saturate(1.15) brightness(1.04);
  -webkit-backdrop-filter: blur(9px) saturate(1.15) brightness(1.04);
}

/* One oblique pass of reflected light across the glass every few
   seconds — clipped to the plaque by the sign's own overflow. */
.hero__sign::after {
  content: "";
  position: absolute;
  inset-block: -40%;
  inset-inline-start: 0;
  width: 42%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(253, 249, 242, 0) 0%,
    rgba(253, 249, 242, 0.1) 44%,
    rgba(253, 249, 242, 0.24) 50%,
    rgba(253, 249, 242, 0.1) 56%,
    rgba(253, 249, 242, 0) 100%
  );
  filter: blur(6px);
  transform: translateX(130%);
  animation: hero-sign-shine var(--dur-sheen) var(--ease-in-out) infinite;
}
@keyframes hero-sign-shine {
  0%   { transform: translateX(130%); }
  10%  { transform: translateX(-230%); }
  100% { transform: translateX(-230%); }
}

.hero__sign-word {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-inline-end: -0.28em;
  font-size: clamp(1.4rem, 1.15rem + 1.35vw, 2.7rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  white-space: nowrap;
  transition: color var(--dur-med) var(--ease-out);
}
/* The service dot — dim until the café is open, then warm and alive.
   The ring that breathes out of it is a real disc of its own, scaled and
   faded, rather than a spreading box-shadow: a shadow would have to be
   re-blurred on every frame of the pulse, where a scaled layer only
   moves. Same look, nothing on the paint path. */
.hero__sign-word::before {
  content: "";
  position: relative;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--color-paper-dim);
  transition: background var(--dur-med) var(--ease-out);
}
.hero__sign-word::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: -0.425rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  opacity: 0;
  pointer-events: none;
}
.hero__sign-word.is-open {
  color: var(--color-accent-soft);
}
.hero__sign-word.is-open::before {
  background: var(--color-accent-soft);
}
.hero__sign-word.is-open::after {
  animation: hero-sign-pulse var(--dur-pulse) var(--ease-out) infinite;
}
@keyframes hero-sign-pulse {
  0%   { opacity: 0.5; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(2.1); }
  100% { opacity: 0;   transform: scale(2.1); }
}

/* The hairline between the two lines: a moving highlight travels along it
   for as long as the sign is on screen. */
.hero__sign-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(253, 249, 242, 0) 0%,
    rgba(217, 167, 126, 0.85) 50%,
    rgba(253, 249, 242, 0) 100%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: hero-sign-sweep var(--dur-sheen) var(--ease-in-out) infinite;
}
@keyframes hero-sign-sweep {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: 0% 0; }
}

.hero__sign-now {
  margin-inline-end: -0.42em;
  font-size: clamp(0.85rem, 0.76rem + 0.42vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  color: rgba(239, 228, 208, 0.72);
}

/* ---------- Content ----------
   The whole viewport is the composition here: the block steps past the
   standard .container width (--hero-content-max) so label, title, copy and
   actions read as one statement. */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RTL: text column starts from the right */
  /* Wider than the site container, but not edge to edge: with its own
     inset the block keeps air on both sides of the screen. */
  max-width: var(--hero-content-max, 84rem);
  padding-inline: clamp(1.5rem, 5.5vw, 6rem);
  /* Vertical rhythm is keyed to viewport HEIGHT, not width: a short
     laptop viewport tightens the gaps and padding so the whole hero
     still lands inside one screen, while tall desktops keep the
     original generous spacing. */
  gap: clamp(1.25rem, 5vh, 6rem);
  padding-block: clamp(1.25rem, 5vh, 6rem);
  /* Fill the hero in one view: stretch to the full hero height and share
     what is left over out evenly, so label to actions land on one rhythm
     with equal air between them and equal air at the edges, and never
     scrolls. The one measure serves the gaps and the block padding alike. */
  align-self: stretch;
  justify-content: space-evenly;
  /* The block is as wide as the title and as tall as the hero, so its box
     reaches across the wordmark floating on the other side. It is a
     container, not a target: the pointer passes through it, while its own
     rows stay live for text and links. */
  pointer-events: none;
}
.hero__content > * {
  pointer-events: auto;
}

.hero__label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-latin);
  font-size: clamp(0.75rem, 0.6875rem + 0.3125vw, 0.9375rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.85;
}
.hero__rule {
  width: 2.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.hero__title {
  font-family: var(--font-fa);
  /* The title's two parts are separate <span>s, each permanently its own
     line, so it is always exactly two lines at every width. Double-keyed
     (vw AND vh) so it still fits one viewport on short laptops. */
  font-size: clamp(2.25rem, min(7.2vw, 9vh), 6.25rem);
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
}

/* Title parts: each is always a block — an explicit, permanent line
   break at every viewport width. (The whitespace between the two spans
   in the markup renders as nothing between blocks.) */
.hero__title-first,
.hero__title-rest {
  display: block;
}

.hero__text {
  font-size: clamp(1rem, min(1.55vw, 2.2vh), 1.375rem);
  font-weight: 300;
  line-height: 2;
  opacity: 0.85;
  max-width: 44rem;
}

/* ---------- Actions ---------- */
.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.hero__link {
  position: relative;
  font-size: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.125rem);
  padding-block: 0.4rem;
  opacity: 0.9;
  transition: opacity var(--dur-fast) var(--ease-out);
}
/* Growing underline — grows from the right in RTL */
.hero__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0.1rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-med) var(--ease-out);
}
.hero__link:hover {
  opacity: 1;
}
.hero__link:hover::after {
  transform: scaleX(1);
}

/* ---------- Entrance animations (slow, elegant) ----------
   Every entrance is held PAUSED until js/site.js adds .is-ready to <html>
   as the loader's veil lifts, so nothing has already run behind the loader.
   Pausing holds the delay too, so each delay is measured from the lift. */
.hero__label,
.hero__title,
.hero__text,
.hero__flourish,
.hero__actions {
  opacity: 0;
  animation: hero-rise var(--dur-reveal) var(--ease-out) forwards;
}
.hero__label {
  animation-delay: 0.15s;
}
.hero__title {
  animation-delay: 0.28s;
}
.hero__text {
  animation-delay: 0.42s;
}
.hero__flourish {
  animation-delay: 0.52s;
}
.hero__actions {
  animation-delay: 0.66s;
}

/* The gate itself. Without JavaScript the class is never added and the
   entrances play behind the veil — nothing is left hidden, which is the one
   thing that must never happen. The sign's two endless loops are held with
   the entrances, so their first visible beat is the start of a cycle. */
html.js-loader:not(.is-ready) .hero__label,
html.js-loader:not(.is-ready) .hero__title,
html.js-loader:not(.is-ready) .hero__text,
html.js-loader:not(.is-ready) .hero__flourish,
html.js-loader:not(.is-ready) .hero__actions,
html.js-loader:not(.is-ready) .hero__sign,
html.js-loader:not(.is-ready) .hero__wordmark,
html.js-loader:not(.is-ready) .hero__wordmark::before,
html.js-loader:not(.is-ready) .hero__sign::after,
html.js-loader:not(.is-ready) .hero__sign-rule,
html.js-loader:not(.is-ready) .hero__sign-word::after {
  animation-play-state: paused;
}

/* ---------- Hero flourish ----------
   A small coffee bean between two hairlines — the quiet editorial
   ornament that closes the intro and opens the actions. */
.hero__flourish {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.hero__flourish-rule {
  width: 3rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.hero__flourish-bean {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-accent-soft);
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Responsive — tablet & mobile
   ============================================================ */
@media (max-width: 59.99rem) {
  /* scale the wordmark down on tablet/mobile so it stays centred in its
     half of the hero without crowding the Persian content — still one
     line, still the largest type in the lockup */
  .hero__wordmark {
    font-size: clamp(3.25rem, min(11.5vw, 20vh), 10rem);
  }
  /* The enlarged content block steps back down a tier so it never
     crosses under the wordmark floating on the left. */
  .hero__content {
    max-width: var(--hero-content-max-tablet, 76rem);
  }
}

/* Mobile (< 40rem): the header drops to its mobile height so the hero fills
   the remaining viewport, and the hero stacks — the wordmark sits above the
   content as a normal flow element. The former 600px and 550px tiers are
   merged here, so mobile has a single breakpoint. */
@media (max-width: 39.99rem) {
  .hero {
    min-height: calc(100vh - var(--header-h-mobile));
    min-height: calc(100svh - var(--header-h-mobile));
    flex-direction: column;
    justify-content: center;
  }

  /* The larger bottom margin opens air before the content below; stacked,
     the lockup keeps its own tight rhythm. */
  .hero__brand {
    position: static;
    transform: none;
    margin-block-end: clamp(1.75rem, 5vh, 3rem);
    gap: clamp(0.65rem, 1.8vh, 1.15rem);
  }

  .hero__sign {
    translate: none;
  }

  /* Push the content down from the wordmark: a larger top padding puts
     the label, title, text, and actions clearly below it. Height-keyed
     so a short phone viewport does not overflow the single-screen hero. */
  .hero__content {
    /* In the stacked mobile layout the parent is a column, so fill the
       remaining height here instead of stretching the cross axis.
       Back to the standard container width on phones: the enlarged
       desktop block is a wide-screen flourish, and here the whole
       viewport width already is the screen. */
    flex: 1 1 auto;
    max-width: var(--container-max);
    padding-inline: var(--container-pad);
    gap: clamp(0.75rem, 1.8vh, 1.5rem);
    padding-block: clamp(1.5rem, 5vh, 4.5rem) clamp(1.75rem, 5.5vh, 4.5rem);
  }
}

@media (max-width: 29.99rem) {
  .hero__actions {
    gap: 1.25rem;
  }
  /* Narrowest phones: the glass plaque keeps both lines and the dot, and
     the hairline stands down so the sign never crowds the edge. */
  .hero__sign-rule {
    display: none;
  }
}