/* ==========================================================================
   OASIS INFLATABLES — gate.css
   The construction screen. Loaded only by gate.html, so its cost is never paid
   by a page a visitor is allowed to see.

   The idea: Hull 001 is sitting in a dry dock at night. Solid lines are what is
   built, dashed lines are what is still to come, and the sparks are the welders
   still on the job. Everything sits on the deep hull colour so the gate reads as
   a different place from the sand-coloured shop behind it.
   ========================================================================== */

body.gate {
  background: var(--deep-2);
  color: var(--foam);
  /* The shared noscript bar talks about prices and the cart, which do not exist
     on this page. The gate carries its own, accurate note instead. */
}
body.gate .noscript-bar { display: none; }

.dock {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  /* The bottom padding is the dry dock's airspace: the ship is drawn there, and
     nothing else is allowed into it. Sized against the same figure as the hull
     below so the copy can never creep down into the scaffolding. */
  padding: clamp(1.1rem, 2.4vw, 1.9rem) var(--gutter) clamp(1.5rem, 21vh, 11rem);
  overflow: hidden;
}

/* Night sky, dock lighting and the blueprint grid the yard is set out on.
   Three layers, no images, and the grid is faint enough to read as texture
   rather than as a table. */
.dock__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(204, 92, 31, .22), transparent 58%),
    radial-gradient(90% 70% at 6% 96%, rgba(29, 91, 86, .40), transparent 62%),
    repeating-linear-gradient(0deg, rgba(231, 240, 237, .05) 0 1px, transparent 1px 86px),
    repeating-linear-gradient(90deg, rgba(231, 240, 237, .05) 0 1px, transparent 1px 86px),
    linear-gradient(180deg, var(--deep-2) 0%, var(--deep) 62%, #0B2624 100%);
}
/* a slow sweep of dock light, so the screen is alive without moving the copy */
.dock__sky::after {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  background: radial-gradient(50% 50% at 50% 0%, rgba(232, 145, 96, .16), transparent 70%);
  animation: dockSweep 14s var(--ease-in-out) infinite alternate;
}

.dock__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: clamp(1rem, 3vh, 2rem);
}

/* --- Masthead ------------------------------------------------------------- */
.dock__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.dock__brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.dock__mark { display: block; width: 46px; height: 46px; }
.dock__wordmark { display: grid; line-height: 1; }
.dock__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: .14em;
  color: #fff;
}
.dock__tag {
  font-size: var(--fs-xs);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(231, 240, 237, .62);
  margin-top: .18rem;
}
.dock__status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: .5rem .9rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-pill);
  background: rgba(250, 247, 242, .05);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(231, 240, 237, .82);
}
.dock__lamp {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange-300);
  box-shadow: 0 0 0 4px rgba(232, 145, 96, .18);
  animation: lamp 2.6s var(--ease-in-out) infinite;
}

/* --- Body ----------------------------------------------------------------- */
.dock__body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  flex: 1;
}

.dock__title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.8vw, 4.25rem);
  line-height: .96;
  letter-spacing: -.032em;
  color: #fff;
  text-wrap: balance;
}
/* --orange-300 is the accent picked for dark surfaces: 5.9:1 on --deep */
.dock__title-accent { color: var(--orange-300); }
.dock__title-accent::after {
  content: '';
  display: block;
  width: clamp(3rem, 7vw, 6rem);
  height: 3px;
  margin-top: 1.1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), rgba(204, 92, 31, 0));
}
.dock__lead {
  margin-top: 1.35rem;
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: rgba(231, 240, 237, .78);
}

/* --- Fitout progress ------------------------------------------------------ */
.dock__progress { margin-top: clamp(1.25rem, 2.5vh, 2rem); max-width: 480px; }
.dock__meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(231, 240, 237, .6);
}
.dock__meter-head b { font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: .04em; color: var(--orange-300); }
.dock__meter {
  margin-top: .6rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.dock__meter span {
  display: block;
  width: 82%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--orange-700), var(--orange) 55%, var(--orange-300));
}
.dock__specs {
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.dock__specs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px dashed rgba(255, 255, 255, .13);
  font-size: var(--fs-sm);
}
.dock__specs span {
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(231, 240, 237, .55);
}
.dock__specs b { color: #fff; font-weight: 550; text-align: right; }

/* --- Password panel ------------------------------------------------------- */
.dock__panel {
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(250, 247, 242, .08), rgba(250, 247, 242, .035));
  box-shadow: var(--sh-4);
  backdrop-filter: blur(10px);
}
.gate__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 750;
  letter-spacing: -.01em;
  color: #fff;
}
.gate__note { margin-top: .5rem; font-size: var(--fs-sm); color: rgba(231, 240, 237, .7); }
.gate__label {
  display: block;
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(231, 240, 237, .72);
}
.gate__row { display: flex; gap: .6rem; margin-top: .55rem; flex-wrap: wrap; }
.gate__input {
  flex: 1 1 11rem;
  min-width: 0;
  min-height: 54px;
  padding: .85rem 1.1rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  letter-spacing: .08em;
  color: #fff;
  background: rgba(10, 33, 31, .72);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.gate__input::placeholder { color: rgba(231, 240, 237, .42); letter-spacing: normal; }
.gate__input:focus {
  outline: none;
  border-color: var(--orange-300);
  background: rgba(10, 33, 31, .92);
  box-shadow: 0 0 0 3px rgba(232, 145, 96, .26);
}
.gate__submit { flex: none; }
.gate__hint { margin-top: .85rem; font-size: var(--fs-xs); color: rgba(231, 240, 237, .58); }
.gate__error {
  margin-top: .7rem;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: #FFC2B4;
}
.gate__error::before { content: '⚠ '; }
.gate__error[hidden] { display: none; }

.gate.is-invalid .gate__input {
  border-color: #E4776A;
  box-shadow: 0 0 0 3px rgba(228, 119, 106, .22);
}
.gate.is-invalid { animation: gateShake .42s var(--ease-in-out) both; }

.gate__noscript {
  margin-top: 1.1rem;
  padding: .8rem 1rem;
  border-left: 3px solid var(--orange);
  border-radius: var(--r-xs);
  background: rgba(204, 92, 31, .12);
  font-size: var(--fs-xs);
  color: rgba(231, 240, 237, .82);
}
.gate__noscript a { color: var(--orange-300); }

.dock__foot {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: rgba(231, 240, 237, .62);
}
.dock__foot a { color: rgba(255, 255, 255, .9); text-decoration-color: rgba(255, 255, 255, .35); }
.dock__foot a:hover { color: var(--orange-300); }

/* The panel's waiting state while the password is checked */
.gate.is-busy .gate__submit { pointer-events: none; opacity: .6; }

/* --- The ship in dry dock ------------------------------------------------- */
.dock__hull {
  position: absolute;
  inset: auto 0 -1px 0;
  z-index: 1;
  width: 100%;
  height: min(26vh, 260px);
  opacity: .5;
  pointer-events: none;
}
.hull-line {
  fill: none;
  stroke: url(#hullStroke);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.hull-line--strong { stroke-width: 3; }
.hull-line--faint { opacity: .5; }
.hull-line--dashed { stroke-dasharray: 11 9; opacity: .8; }
.hull-fill rect { fill: rgba(232, 145, 96, .14); stroke: rgba(232, 145, 96, .34); stroke-width: 1; }

/* Weld flashes. Four points on the hull, each with its own rhythm, so they
   never beat together and read as machinery rather than as a loop. */
.spark { fill: #FFD9B0; opacity: 0; transform-box: fill-box; transform-origin: center; }
.spark--a { animation: weld 4.4s linear infinite; }
.spark--b { animation: weld 5.7s linear 1.1s infinite; }
.spark--c { animation: weld 6.3s linear 2.4s infinite; }
.spark--d { animation: weld 7.1s linear 3.2s infinite; }

@keyframes weld {
  0%, 88%, 100% { opacity: 0; transform: scale(.25); }
  90% { opacity: .85; transform: scale(1); }
  92% { opacity: .2; transform: scale(.55); }
  94% { opacity: .7; transform: scale(.85); }
  96% { opacity: .1; transform: scale(.4); }
}
@keyframes lamp {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 4px rgba(232, 145, 96, .18); }
  50% { opacity: .55; box-shadow: 0 0 0 7px rgba(232, 145, 96, .06); }
}
@keyframes dockSweep {
  from { transform: translateX(-6%); opacity: .75; }
  to   { transform: translateX(6%); opacity: 1; }
}
@keyframes gateShake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-7px); }
  46% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
  88% { transform: translateX(2px); }
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 980px) {
  /* The two columns stack, so the page is taller and the ship is given less of
     it — and less air is reserved for it. */
  .dock { padding-bottom: clamp(1.5rem, 18vh, 7rem); }
  .dock__body { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; padding-block: 1rem 1.5rem; }
  .dock__lead { max-width: none; }
  .dock__hull { height: min(22vh, 210px); opacity: .38; }
}
@media (max-width: 560px) {
  .dock { padding-bottom: clamp(1.25rem, 5vh, 2.25rem); }
  .dock__status { display: none; }
  .gate__row { flex-wrap: nowrap; }
  .gate__submit { padding-inline: 1.15rem; }
  .dock__hull { display: none; }
}

/* --- Preferences ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .spark, .dock__lamp, .dock__sky::after { animation: none; }
  .spark { opacity: .35; }
  .gate.is-invalid { animation: none; }
}

@media (prefers-contrast: more) {
  .dock__lead, .gate__note, .dock__specs span, .dock__foot { color: rgba(255, 255, 255, .92); }
  .gate__input { border-color: #fff; }
}