/* Atmosphere and depth — soft field, sharp signal.
   A background field is either a broad two-tone gradient or a heavily blurred photograph.
   Both are grounds, used interchangeably, on expressive surfaces only (marketing, decks,
   campaign). Product surfaces stay flat. Atmospheric blur must never read as measured
   uncertainty — that is --data-uncertainty, hard-edged. */
:root{
  /* --- Gradient fields: wide, slow, two palette tones. Angle is part of the token. --- */
  --field-navy:linear-gradient(168deg,var(--ot-navy-900) 0%,var(--ot-navy-700) 55%,var(--ot-blue-600) 100%);
  --field-charcoal:linear-gradient(200deg,var(--ot-charcoal) 0%,#20313a 62%,var(--ot-teal-600) 140%);
  --field-paper:linear-gradient(170deg,var(--ot-neutral-050) 0%,var(--ot-paper) 45%,var(--ot-paper-deep) 100%);
  --field-tide:radial-gradient(120% 90% at 18% 8%,var(--ot-blue-600) 0%,var(--ot-navy-800) 48%,var(--ot-navy-900) 100%);

  /* --- Photographic fields: blur the image until it reads as colour, not subject --- */
  --field-blur:34px;
  --field-blur-heavy:64px;
  --field-scale:1.12; /* @kind other */   /* hides the soft edge the blur leaves at the frame */

  /* --- Tints laid over a photographic field so sharp type keeps contrast --- */
  --field-tint-navy:rgba(4,32,68,.58);
  --field-tint-navy-deep:rgba(2,19,42,.72);
  --field-tint-charcoal:rgba(28,31,36,.55);
  --field-tint-paper:rgba(246,244,237,.74);

  /* --- Grain: optional fine tonal noise over any field --- */
  --grain-opacity:.05; /* @kind other */
  --grain-size:140px;

  /* --- Vignette: weights one edge of a field so type sits clear --- */
  --vignette-bottom:linear-gradient(to top,rgba(2,19,42,.86) 0%,rgba(2,19,42,.45) 38%,rgba(2,19,42,0) 78%); /* @kind color */
  --vignette-side:linear-gradient(to right,rgba(2,19,42,.82) 0%,rgba(2,19,42,.30) 42%,rgba(2,19,42,0) 72%); /* @kind color */

  /* --- Slat field: paper bands lit from behind --- */
  --slat-radius:22px;
  --slat-height:100px;
  --slat-gap:10px;
  --slat-paper-top:rgba(250,251,249,.42);
  --slat-paper-bottom:rgba(241,245,242,.36);
  --slat-shadow:0 7px 20px -10px rgba(2,19,42,.22);
  --slat-glow:radial-gradient(52% 36% at 34% 26%,var(--ot-teal-400) 0%,rgba(127,218,221,.95) 8%,rgba(127,218,221,.50) 50%,rgba(127,218,221,.15) 81%,rgba(127,218,221,0) 100%),radial-gradient(40% 18% at 26% 46%,rgba(80,195,199,.62) 0%,rgba(127,218,221,.26) 54%,rgba(127,218,221,0) 86%),radial-gradient(26% 30% at 0% 44%,rgba(31,140,144,.52) 0%,rgba(31,140,144,0) 74%); /* @kind color */
  --slat-glow-blur:20px;

  /* --- Product UI transparency: the scrim and the header blur. Nothing else. --- */
  --scrim-dialog:rgba(2,19,42,.55);
  --header-blur:14px;
}

/* A field: gradient or photographic. Apply to a section, never to a card. */
.ot-field{position:relative;isolation:isolate}
.ot-field[data-grain]::after,.ot-field-photo[data-grain]::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grain-opacity);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");background-size:var(--grain-size)}
.ot-field-photo[data-grain]::after{z-index:3}

/* Photographic field: a full-bleed image blurred into a colour ground, plus a tint. */
.ot-field-photo{position:relative;isolation:isolate;overflow:hidden}
.ot-field-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(var(--field-blur));transform:scale(var(--field-scale));z-index:0}
.ot-field-photo>.ot-tint{position:absolute;inset:0;background:var(--field-tint-navy);z-index:1}
.ot-field-photo>*:not(img):not(.ot-tint){position:relative;z-index:4}

/* Slat field: paper bands lit from behind. .ot-slats holds the stack and the bloom;
   each .ot-slat is one band, staggered with --in-left / --in-right. Content goes in a
   sibling positioned above. Expressive surfaces only — never a card. */
.ot-slats{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:var(--slat-gap);justify-content:center}
.ot-slats::before{content:"";position:absolute;inset:0;background:var(--slat-glow);filter:blur(var(--slat-glow-blur));z-index:0}
.ot-slat{position:relative;z-index:1;flex:0 0 var(--slat-height);border-radius:var(--slat-radius);background:linear-gradient(180deg,var(--slat-paper-top) 0%,var(--slat-paper-bottom) 100%);box-shadow:var(--slat-shadow);margin-left:var(--in-left,24px);margin-right:var(--in-right,24px)}