/* v4 tokens. Lines 2 to 175 are archive/CLAUDE-DESIGN-SEPTEMBER/extracted/ocean-design-system.css, verbatim (28 August 2026). The v4 additions from v4/CLAUDE-DESIGN.md section 4 follow at the end. */
/* ===================================================================
   OCEAN JET SKI - design system
   Extracted from the Lovable build, 28 August 2026.
   Project 749f77e8-e37c-4e47-9c0d-59efa1fcc655

   Converted from Tailwind v4 @theme / @utility syntax to plain CSS so
   it works anywhere: Claude Design, a static page, or a WordPress theme.
   The values are verbatim from the live build.
   =================================================================== */

:root{
  /* type ------------------------------------------------------------
     One family for the whole site. Helvetica Neue ships on every Mac
     and iPhone, so most traffic gets it natively with no download.
     Inter is the free cross-platform fallback. */
  --font-display: "Helvetica Neue", Helvetica, Inter, Arial, sans-serif;
  --font-sans:    "Helvetica Neue", Helvetica, Inter, Arial, sans-serif;

  /* colour ---------------------------------------------------------- */
  --paper:        #ffffff;   /* default section background */
  --paper-warm:   #f7f4ef;   /* alternating sections */
  --sand:         #ece5d8;   /* Best moments ground, a step warmer than paper-warm (2 Sep) */
  --paper-deep:   #0e1418;   /* footer only */
  --ink:          #111315;   /* headlines and body */
  --ink-soft:     #4a4a4a;   /* secondary body */
  --ink-faint:    #8a8f93;   /* eyebrows, metadata */
  --rule:         #e3ded6;   /* hairlines, dividers, outline buttons */
  --red:          #db2433;   /* brand red: CTA fill, prices, title rule */
  --marine:       #1b3a4b;   /* icons, focus ring */
  --marine-soft:  #e8eef1;   /* chip backgrounds */
  --whatsapp:     #25d366;   /* the WhatsApp button and nothing else */

  /* the one shadow in the entire design */
  --shadow-card: 0 18px 48px rgba(17,19,21,.14);
}

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Display treatment -------------------------------------------------
   Poster-style uppercase neo-grotesque. Tight leading is the point:
   0.92 is what makes the lines almost touch. */
.display-caps{
  text-transform: uppercase;
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.015em;
}

/* The signature detail: a red rule under the last word or two of a
   section title. Once per section, never in the hero. */
.rule-word{
  border-bottom: 2px solid rgba(219,36,51,.55);
  padding-bottom: 6px;
}

/* Buttons -----------------------------------------------------------
   Sharp corners. border-radius 0 is most of why this reads expensive. */
.btn-base{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding-inline: 20px;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  line-height: 1;
  text-align: center;
  transition: opacity .2s ease, background-color .2s ease;
}
.btn-red{ background-color: var(--red); color:#fff; }
.btn-red:hover{ opacity:.9; }

.btn-outline{ border:1px solid var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover{ background-color: rgba(17,19,21,.04); }

.btn-whatsapp{ background-color: var(--whatsapp); color:#06301a; }

/* Form fields -------------------------------------------------------
   Used in the booking card and the contact form. Label sits above the
   value; the whole row is the tap target. */
.field-row{
  width:100%;
  min-height:56px;
  font-size:17px;
  font-family: var(--font-sans);
  color: var(--ink);
  background: transparent;
  border:0;
  outline:none;
}
.field-row::placeholder{ color: var(--ink-faint); }
.field-row:focus-visible{ outline:2px solid var(--marine); outline-offset:2px; }

/* Motion ------------------------------------------------------------
   One quiet entrance per section. Fires once, never re-runs. */
.rise{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.rise.is-in{ opacity:1; transform:none; }

/* Desktop hero cross-fade. Opacity only, no movement of any kind.
   Slide 0 is visible by default in plain CSS so the first paint is
   never blank even if the script never runs. */
.hero-slide{ opacity:0; transition: opacity 1.6s ease-in-out; }
.hero-slide:first-child{ opacity:1; }
.hero-slide.is-active{ opacity:1; }
.hero-slide:first-child.is-inactive{ opacity:0; }

/* Reviews marquee: two vertical columns, opposite directions, seamless. */
@keyframes marquee-up   { from{ transform: translateY(0); }    to{ transform: translateY(-50%); } }
@keyframes marquee-down { from{ transform: translateY(-50%); } to{ transform: translateY(0); } }

.marquee-track{
  animation-duration: 40s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.marquee-up{ animation-name: marquee-up; }
.marquee-down{ animation-name: marquee-down; }
.marquee-paused{ animation-play-state: paused; }

.marquee-mask{
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
}

/* Accessibility floor ----------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .rise{ opacity:1 !important; transform:none !important; transition:none !important; }
  .marquee-track{ animation:none !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ===================================================================
   TYPE SCALE, for reference. Rendered sizes on the 390px phone canvas.

   h1 / hero          34px  600  uppercase  line-height .92
   section title      28px  600  uppercase  line-height .92
   card title         21px  600  uppercase
   body               17px  400  sentence   line-height 1.6
   hero sub           18px  400
   price figure       30px  600  in --red
   button label       14px  500  uppercase  letter-spacing .16em
   eyebrow / label    13px  400

   Desktop (>=1024px) raises display only: h1 56px, section title 40px,
   card title 24px. Body stays 17-18px. It never goes the other way.

   Hard floors: nothing below 13px, nothing above 56px on the phone.
   Prices and requirements are among the LARGEST text on the page.

   Spacing: 24px gutters, 72px section padding, max width 440px phone /
   1180px desktop. Desktop breakpoint 1024px, never 900px.

   Radius: 0 on photos, sections and outline buttons. 16px on the
   booking card and bottom sheet only. 999px on avatars.
   =================================================================== */

/* ===================================================================
   v4 additions, CLAUDE-DESIGN.md section 4. Nothing above changes.
   =================================================================== */
:root{
  /* motion, from futuregoals, one curve for everything */
  --ease:        cubic-bezier(.7, 0, .3, 1);
  --dur-fast:    .2s;
  --dur:         .4s;
  --dur-slow:    .6s;
  --lag:         .12;          /* lerp factor for the scroll lag, see section 6 */

  /* media panel ground, hero and footer only (it is --paper-deep, named for its job) */
  --sea:         var(--paper-deep);

  /* frame ratios */
  --ratio-portrait: 4 / 5;
  --ratio-landscape: 4 / 3;

  /* pressed state of the primary button (CLAUDE-DESIGN-SEPTEMBER section 3.1, missing from the extracted file) */
  --red-deep:    #a8121f;

  /* 31 Aug 2026 decision UI-04: #8a8f93 fails 4.5:1 at 13px on white; the sandbox ships #6b7075
     (5.00:1 on white, 4.56:1 on --paper-warm). Overrides the September value above. */
  --ink-faint:   #6b7075;
}