/* ==========================================================================
   DEPTH DIGITAL — ENTRANCE
   The brand resolves over colour-matched water footage. Enter then carries
   that exact lock-up into the real header while the genuine home page
   gradually replaces the opening colour field.
   ========================================================================== */

/* First-paint cover. JavaScript replaces this with the interactive layer; if
   the module fails, the cover quietly clears and leaves the website usable. */
html.is-diving::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 400;
  background:
    radial-gradient(72% 45% at 50% 42%, rgba(203, 255, 250, .2) 0%, rgba(114, 221, 220, .07) 46%, transparent 75%),
    linear-gradient(180deg, rgba(2, 45, 69, .02) 0%, rgba(2, 44, 67, .1) 65%, rgba(1, 28, 47, .32) 100%),
    #0f81a6;
  animation: entrance-failsafe 3s linear forwards;
}

html.is-diving.entrance-live::before { display: none; }

html.is-diving,
html.is-diving body {
  overflow: hidden;
  overscroll-behavior: none;
}

@keyframes entrance-failsafe {
  0%, 84% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html.is-diving::before { display: none; }
}

/* --------------------------------------------------------------------------
   Gradual page handoff
   -------------------------------------------------------------------------- */
html.entrance-active .site-header,
html.entrance-active .depth-gauge,
html.entrance-active main,
html.entrance-active [data-whatsapp-contact] {
  opacity: 0;
  transition: opacity 1.35s cubic-bezier(.2, .65, .3, 1);
}

html.entrance-active.entrance-page-ready .site-header,
html.entrance-active.entrance-page-ready .depth-gauge,
html.entrance-active.entrance-page-ready main,
html.entrance-active.entrance-page-ready [data-whatsapp-contact] {
  opacity: 1;
}

/* Keep the destination logo clear until the travelling copy has reached it. */
html.entrance-active .site-header .brand__logo-stack {
  opacity: 0;
  transition:
    width .35s cubic-bezier(.2, .65, .3, 1),
    opacity .36s ease;
}

html.entrance-active.entrance-logo-landed .site-header .brand__logo-stack {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Interactive layer
   -------------------------------------------------------------------------- */
.entrance {
  --enter-y: calc(50% + clamp(120px, 17vh, 154px));
  position: fixed;
  inset: 0;
  z-index: 401;
  overflow: hidden;
  cursor: default;
  outline: none;
  touch-action: none;
}

.entrance__surface,
.entrance__site-colour {
  position: absolute;
  pointer-events: none;
}

/* The encoded water field and this fallback share the same base colour. The
   full-surface tint then treats both equally, so portrait letterboxing and a
   late-loading video blend into one continuous field without a hard edge. */
.entrance__surface {
  inset: 0;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  background: #0f81a6;
}

.entrance__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity .68s cubic-bezier(.2, .65, .3, 1);
  pointer-events: none;
  user-select: none;
}

.entrance.video-ready .entrance__video {
  opacity: 1;
}

.entrance__surface::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(72% 45% at 50% 42%, rgba(203, 255, 250, .2) 0%, rgba(114, 221, 220, .07) 46%, transparent 75%),
    linear-gradient(180deg, rgba(2, 45, 69, .02) 0%, rgba(2, 44, 67, .1) 65%, rgba(1, 28, 47, .32) 100%);
  pointer-events: none;
}

/* This is the same colour recipe as .ocean__gradient. It briefly replaces the
   opening field, making the subsequent transparency reveal imperceptible. */
.entrance__site-colour {
  inset: -10%;
  z-index: 0;
  opacity: 0;
  transform: scale(1.08);
  background:
    radial-gradient(90% 55% at 50% -5%, rgba(196,255,249,.95) 0%, rgba(55,207,215,.62) 18%, transparent 48%),
    linear-gradient(
      180deg,
      #5fd7dc 0%,
      #1882a2 17%,
      #0a526f 36%,
      #07384f 54%,
      #061f31 72%,
      #03111d 100%
    );
}

/* --------------------------------------------------------------------------
   Centred brand lock-up
   -------------------------------------------------------------------------- */
.entrance__identity {
  position: fixed;
  top: 45%;
  left: 50%;
  z-index: 4;
  width: min(82vw, 570px);
  aspect-ratio: 1222 / 341;
  opacity: 1;
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: transform, opacity;
}

.entrance__emblem {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 27.905%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  clip-path: circle(45% at 49.7% 50%);
  opacity: 0;
  transform: translate(-50%, 18px) scale(.99);
  transform-origin: center;
  mix-blend-mode: multiply;
  animation:
    entrance-emblem-emerge 2.4s .12s cubic-bezier(.22, .61, .36, 1) forwards,
    entrance-emblem-align .68s 2.55s cubic-bezier(.2, .65, .3, 1) forwards;
  will-change: left, opacity, transform;
}

.entrance__emblem-source {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
}

.entrance__wordmark {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  clip-path: inset(0 0 0 100%);
  mix-blend-mode: multiply;
  animation: entrance-wordmark-form 1.55s 3.55s cubic-bezier(.4, 0, .3, 1) forwards;
  will-change: clip-path;
}

/* The depth reveal is one uninterrupted opacity/transform interpolation.
   Keeping it separate from the later horizontal alignment prevents easing
   from restarting at intermediate checkpoints and removes visible stepping. */
@keyframes entrance-emblem-emerge {
  from {
    opacity: 0;
    transform: translate(-50%, 18px) scale(.99);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes entrance-emblem-align {
  from { left: 50%; }
  to { left: 13.9525%; }
}

@keyframes entrance-wordmark-form {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 34.5%);
  }
}

/* A single soft aqua reflection crosses the completed mark. The original logo
   alpha is the mask, so no highlight or rectangular edge can leave the D or
   lettering. */
.entrance__glint {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: url('/assets/logo-depth-digital-top.webp');
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url('/assets/logo-depth-digital-top.webp');
  mask-mode: alpha;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.entrance__glint::before {
  content: '';
  position: absolute;
  top: -22%;
  left: -31%;
  width: 24%;
  height: 144%;
  border-radius: 48% 52% 46% 54%;
  background:
    linear-gradient(
      104deg,
      transparent 8%,
      rgba(205, 255, 250, .08) 27%,
      rgba(238, 255, 253, .62) 49%,
      rgba(123, 233, 231, .24) 66%,
      transparent 86%
    );
  opacity: 0;
  filter: blur(2px);
  mix-blend-mode: screen;
  transform: translateX(0) skewX(-9deg) rotate(2deg);
  transform-origin: center;
  animation: entrance-logo-glint 1.55s 4.94s cubic-bezier(.32, 0, .28, 1) forwards;
  will-change: opacity, transform;
}

@keyframes entrance-logo-glint {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-9deg) rotate(2deg);
  }
  15% { opacity: .16; }
  42% { opacity: .42; }
  74% { opacity: .28; }
  100% {
    opacity: 0;
    transform: translateX(610%) skewX(-9deg) rotate(2deg);
  }
}

.entrance.has-started .entrance__identity {
  opacity: 1;
  transform: translate(-50%, -50%);
  filter: none;
}

.entrance.has-started .entrance__emblem {
  animation: none;
  left: 13.9525%;
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.entrance.has-started .entrance__wordmark {
  animation: none;
  opacity: 1;
  clip-path: inset(0 0 0 34.5%);
  will-change: auto;
}

.entrance.has-started .entrance__glint::before {
  animation: none;
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Circular Enter control
   -------------------------------------------------------------------------- */
.entrance__prompt {
  position: absolute;
  top: var(--enter-y);
  left: 50%;
  z-index: 5;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(12px);
  animation: entrance-prompt-arrive .72s 6.52s cubic-bezier(.2, .65, .3, 1) forwards;
  pointer-events: none;
}

@keyframes entrance-prompt-arrive {
  to {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
  }
}

.entrance.can-enter .entrance__prompt { pointer-events: auto; }

.entrance.has-started .entrance__prompt {
  animation: none;
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.entrance__enter {
  position: relative;
  display: grid;
  width: 100px;
  height: 100px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(4, 59, 70, .42);
  border-radius: 50%;
  background: rgba(231, 255, 253, .2);
  box-shadow:
    0 18px 44px rgba(4, 54, 65, .13),
    inset 0 1px 0 rgba(255, 255, 255, .58);
  color: #073d49;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1;
  text-indent: .2em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    color .3s ease,
    background-color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    transform .35s cubic-bezier(.2, .65, .3, 1);
}

.entrance__enter::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 50%;
  pointer-events: none;
}

.entrance__enter::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(7, 61, 73, .17);
  border-radius: 50%;
  opacity: .7;
  pointer-events: none;
  animation: entrance-enter-breathe 2.8s 7.2s ease-in-out infinite;
}

@keyframes entrance-enter-breathe {
  0%, 100% { opacity: .28; transform: scale(.96); }
  50% { opacity: .72; transform: scale(1.055); }
}

.entrance__enter:hover {
  transform: translateY(-3px) scale(1.025);
  border-color: rgba(4, 59, 70, .62);
  background: rgba(239, 255, 254, .4);
  box-shadow:
    0 22px 48px rgba(4, 54, 65, .18),
    inset 0 1px 0 rgba(255, 255, 255, .72);
}

.entrance__enter:active { transform: translateY(0) scale(.96); }
.entrance__enter:disabled { cursor: default; }

.entrance__enter:focus-visible,
.entrance__skip:focus-visible {
  outline: 2px solid rgba(190, 255, 248, .92);
  outline-offset: 4px;
}

.entrance__enter:focus:not(:focus-visible),
.entrance__skip:focus:not(:focus-visible) { outline: none; }

/* Skip is intentionally available only after Enter. */
.entrance__skip {
  position: absolute;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 4vh, 38px);
  z-index: 6;
  padding: 10px 18px;
  border: 1px solid rgba(210, 244, 246, .28);
  border-radius: 999px;
  background: rgba(3, 16, 26, .32);
  color: rgba(225, 245, 247, .75);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s cubic-bezier(.2, .65, .3, 1), color .25s ease;
  pointer-events: none;
}

.entrance.can-skip .entrance__skip {
  opacity: 1;
  pointer-events: auto;
}

.entrance__skip:hover { color: #f3fbfc; }
.entrance__skip:focus-visible { outline-color: #a5fff4; }

@media (max-width: 700px) {
  .entrance {
    --enter-y: calc(50% + 116px);
  }

  .entrance__identity {
    top: 44.5%;
    width: min(91vw, 440px);
  }

  .entrance__video {
    top: 42%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 132%;
    height: auto;
    max-width: none;
    aspect-ratio: 910 / 512;
    object-fit: cover;
    object-position: 50% 50%;
    transform: translate(-50%, -50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }

  .entrance__enter {
    width: 94px;
    height: 94px;
  }
}

@media (max-height: 650px) {
  .entrance {
    --enter-y: calc(50% + 101px);
  }

  .entrance__identity { top: 43%; }

  .entrance__enter {
    width: 86px;
    height: 86px;
  }
}

/* The wordmark's own refraction — the field is animated by entrance.js, which
   is affordable because the element is small. */
.entrance__wordmark.is-refracting {
  filter: url('#dd-mark-water');
}

@media (prefers-reduced-motion: reduce) {

  .entrance__video { display: none; }
  .entrance__rule { display: none; }
  .entrance__wordmark.is-refracting { filter: none; }
}

/* ==========================================================================
   THE RULE
   After the D settles, one full-height line appears at the right edge and
   travels directly left to the final divider at 33.15%. The wordmark uses the
   same timing and easing for a right-to-left reveal behind the moving line.
   There is no second line, handover, curve or change of height.

     3.23s  D finishes moving
     3.25s  full-height line appears at the right edge
     3.55s  line and right-to-left wordmark reveal begin
     5.10s  line rests beside the D; wordmark is complete
   ========================================================================== */

.entrance__rule {
  position: absolute;
  top: 5.9%;
  right: 2px;
  left: 33.15%;
  height: 87.7%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  animation:
    entrance-rule-appear .18s 3.25s cubic-bezier(.2, .65, .3, 1) forwards,
    entrance-rule-travel 1.55s 3.55s cubic-bezier(.4, 0, .3, 1) forwards;
  will-change: transform, opacity;
}

.entrance__rule::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 2px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(24, 37, 55, .28) 0%,
    rgba(24, 37, 55, .92) 22%,
    rgba(24, 37, 55, .92) 78%,
    rgba(24, 37, 55, .28) 100%);
}

@keyframes entrance-rule-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes entrance-rule-travel {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Once the dive begins the line is part of the lockup, not an animation — hold
   it at rest so it stays put through the flight to the header. */
.entrance.has-started .entrance__emblem,
.entrance.has-started .entrance__wordmark {
  mix-blend-mode: normal;
}

.entrance.has-started .entrance__rule {
  animation: none;
  opacity: 1;
  transform: translateX(0);
  will-change: auto;
}