/* Aktera arrival page. The palette is the brand's, exactly; nothing added.
   Every horizontal position is a logical property so Hebrew mirrors the page. */
:root {
  --sc-canvas:     #0a0a0a;   /* page ground, dark end of every seam */
  --sc-surface:    #131313;   /* nav backing, credit plate            */
  --ak-raised:     #1c1c1c;   /* contact plate                        */
  --sc-ink:        #f2f2f0;   /* headlines, arrival line, body        */
  --sc-ink-soft:   #a68b52;   /* secondary text                       */
  --sc-accent:     #c9a24b;   /* the WhatsApp action + focus only     */
  --sc-accent-ink: #0a0a0a;

  --sc-font-display: "EB Garamond", "Frank Ruhl Libre", Georgia, serif;
  --sc-font-text:    "Noto Sans", "Noto Sans Hebrew", system-ui, sans-serif;
  --sc-shadow-color: 0 0% 2%;
  --ak-r: 4px;
  --ak-top: env(safe-area-inset-top, 0px);
  --ak-bottom: env(safe-area-inset-bottom, 0px);
}

::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; z-index: 100; inset-block-start: calc(var(--ak-top) + 0.5rem); inset-inline-start: 0.5rem;
  padding: 0.6rem 1rem; background: var(--sc-accent); color: var(--sc-accent-ink);
  border-radius: var(--ak-r); text-decoration: none; transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ---------------------------------------------------------------- chrome -- */
.chrome {
  position: fixed; z-index: var(--sc-z-chrome); inset-inline: 0; inset-block-start: 0;
  display: flex; align-items: center; gap: var(--sc-6);
  padding-block: calc(var(--ak-top) + var(--sc-4)) var(--sc-7);
  padding-inline: var(--sc-gutter);
  /* The footage's foam reaches the top edge; the nav needs its own ground. */
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-surface) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-surface) 70%, transparent) 55%,
    transparent 100%);
  transition: opacity 600ms var(--sc-ease-out);
}
.mark { width: 28px; height: 28px; flex: none; }
.map { display: flex; gap: var(--sc-5); margin-inline-end: auto; }
.map a, .langs button, .also button {
  font: 500 var(--sc-t-xs)/1 var(--sc-font-text);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-ink); text-decoration: none;
  background: none; border: 0; padding: var(--sc-2) 0; cursor: pointer;
  text-underline-offset: 0.45em; text-decoration-thickness: 1px;
  transition: color 160ms var(--sc-ease-out);
}
.map a[aria-current], .langs button[aria-pressed="true"] {
  color: var(--sc-accent); text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  .map a:hover, .langs button:hover, .also button:hover { color: var(--sc-accent); }
}
.langs { display: flex; gap: var(--sc-4); }
.is-hushed .chrome { opacity: 0; pointer-events: none; }

.credit {
  position: fixed; z-index: var(--sc-z-chrome); margin: 0;
  inset-block-end: calc(var(--ak-bottom) + var(--sc-3)); inset-inline-end: var(--sc-gutter);
  padding: var(--sc-1) var(--sc-2); border-radius: var(--ak-r);
  background: color-mix(in oklab, var(--sc-surface) 92%, transparent);
  font: 400 var(--sc-t-xs)/1.4 var(--sc-font-text); color: var(--sc-ink-soft);
  opacity: 0; transition: opacity 600ms var(--sc-ease-out);
}
.show-credit:not(.is-hushed) .credit { opacity: 1; }

/* ----------------------------------------------------------------- world -- */
.seg picture { display: contents; }
.seg .sc-world__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* A held frame is held: no push-in on the still legs. */
.seg--still .sc-world__poster { transform: none !important; }

.intro {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 200; background: var(--sc-canvas);
  transition: opacity 500ms var(--sc-ease-out);
}
.intro.is-done { opacity: 0; }

/* -------------------------------------------------------------- copy layer -- */
.cp { position: absolute; z-index: 1; }
.scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; }
.scrim--foot {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 62%, transparent) 26%,
    transparent 52%);
}
.scrim--land {
  background: radial-gradient(150% 95% at 0% 100%,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 84%, transparent) 34%,
    color-mix(in oklab, var(--sc-canvas) 50%, transparent) 52%,
    transparent 74%);
}
[dir="rtl"] .scrim--land {
  background: radial-gradient(150% 95% at 100% 100%,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 84%, transparent) 34%,
    color-mix(in oklab, var(--sc-canvas) 50%, transparent) 52%,
    transparent 74%);
}
/* The peak: the held frame dims under the line, densest where the line sits. */
.scrim--peak {
  background: radial-gradient(95% 60% at 50% 78%,
    color-mix(in oklab, var(--sc-canvas) 95%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 82%, transparent) 42%,
    color-mix(in oklab, var(--sc-canvas) 40%, transparent) 75%,
    transparent 100%);
}

.line {
  margin: 0; font-family: var(--sc-font-display); font-weight: 400;
  font-size: var(--sc-t-2xl); line-height: 1.06; letter-spacing: -0.012em;
  color: var(--sc-ink); text-wrap: balance;
}
.line--l { font-size: var(--sc-t-3xl); letter-spacing: -0.02em; }
.sub {
  margin: var(--sc-4) 0 0; max-width: 44ch;
  font-size: var(--sc-t-sm); line-height: 1.6; letter-spacing: 0.005em;
  color: var(--sc-ink-soft); text-wrap: pretty;
}

.cp--sea {
  inset-inline-end: var(--sc-gutter); inset-block-end: clamp(3rem, 10vh, 6.5rem);
  max-width: min(32rem, 80vw);
}
.cp--shore {
  inset-inline: var(--sc-gutter); inset-block-start: 50%; translate: 0 -50%;
  text-align: center;
}
.cp--shore .sub { margin-inline: auto; font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-base); }
.cp--land {
  inset-inline-start: var(--sc-gutter); inset-block-end: clamp(3.5rem, 11vh, 7rem);
  max-width: min(44rem, 84vw);
}
.cp--land .line { max-width: 18ch; }

.cp--peak { inset-inline: var(--sc-gutter); inset-block-end: 17vh; text-align: center; }
.arrived {
  margin: 0; font-family: var(--sc-font-display); font-style: italic; font-weight: 400;
  font-size: clamp(3.6rem, 1.4rem + 8.4vw, 10.5rem); line-height: 0.96; letter-spacing: -0.03em;
  color: var(--sc-ink); text-wrap: balance;
}
:lang(he) .arrived, :lang(he) .cp--shore .sub { font-style: normal; letter-spacing: 0; }

.cp--contact {
  inset-inline-end: var(--sc-gutter); inset-block-end: clamp(3.5rem, 12vh, 7rem);
  width: min(30rem, calc(100vw - 2 * var(--sc-gutter)));
  padding: var(--sc-7) var(--sc-6) var(--sc-6);
  background: var(--ak-raised); border-radius: var(--ak-r);
  box-shadow: var(--sc-edge), var(--sc-e3);
}
.cp--contact .line { font-size: var(--sc-t-2xl); }
.addr { margin: var(--sc-3) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.cta {
  display: inline-flex; align-items: center; margin-block-start: var(--sc-6);
  padding: 0.95rem 1.4rem; border-radius: var(--ak-r);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 500 var(--sc-t-base)/1.2 var(--sc-font-text); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform 120ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.cta:active { transform: scale(0.97); }
.cta[aria-disabled="true"] { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .cta:not([aria-disabled="true"]):hover { background: var(--sc-ink); }
}
.also {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sc-2) var(--sc-4);
  margin: var(--sc-6) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
.also button { text-transform: none; letter-spacing: 0.01em; text-decoration: underline; font-size: var(--sc-t-sm); }

/* ------------------------------------------------- language re-flow (sig) -- */
[data-i18n] { transition: opacity 260ms var(--sc-ease-out), transform 300ms var(--sc-ease-out); }
.is-relang [data-i18n] { opacity: 0; transform: translateY(4px); transition-duration: 160ms; }
p[data-i18n], h2[data-i18n], a[data-i18n] { will-change: auto; }

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 860px) {
  /* The wordmark spans the centre of the frame, so the phone shows the centre
     square at full width and feathers it into the page ground. */
  .seg--hero .sc-world__poster, .seg--hero > video, .intro {
    inset: auto 0; inset-block-start: calc(46% - 50vw); height: auto; aspect-ratio: 1 / 1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  }
  /* The Athens line spans the full width here: a band, not a corner. */
  .scrim--land, [dir="rtl"] .scrim--land {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 84%, transparent) 30%,
      color-mix(in oklab, var(--sc-canvas) 45%, transparent) 50%,
      transparent 66%);
  }
  .map { display: none; }
  .langs { margin-inline-start: auto; }
  .cp--sea, .cp--land { inset-inline: var(--sc-gutter); max-width: none; }
  .cp--contact { inset-inline: var(--sc-gutter); width: auto; inset-block-end: calc(var(--ak-bottom) + 3.5rem); }
  .credit { inset-block-end: auto; inset-block-start: calc(var(--ak-top) + 3.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  [data-i18n], .chrome, .credit { transition-duration: 1ms; }
  .is-relang [data-i18n] { transform: none; }
}