/* ============================================================
   AMENTI TOURS — inbound, Mauritius.
   Switchboard candidate #16. See .claude/AMENTI-BRIEF.md.

   The spine: anyone can show you the lagoon, we take you inside.
   One unbroken arrival, sea level to the room and out to the boat.
   ============================================================ */

@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 500;font-display:swap;
  src:url("fonts/newsreader-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 500;font-display:swap;
  src:url("fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 500;font-display:swap;
  src:url("fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 600;font-display:swap;
  src:url("fonts/geist-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 600;font-display:swap;
  src:url("fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/geistmono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}

/* ---------------- the light ----------------
   Seven waypoints, seven colours, one journey: indigo at sea,
   turquoise at the reef, sand at the beach, shade at the door,
   warm inside, and turquoise again from the terrace — which is
   the whole argument, stated in colour. */
:root{
  --ink:#0A1620;
  --paper:#F4EFE6;
  --gold:#C89A5B;
  --line:rgba(244,239,230,.18);

  --w1:#06121F;   /* open ocean   */
  --w2:#0E3E56;   /* the reef     */
  --w3:#1C8C93;   /* the lagoon   */
  --w4:#8FA37E;   /* the beach    */
  --w5:#241A12;   /* the door     */
  --w6:#7A5C3C;   /* the suite    */
  --w7:#2A93A0;   /* the terrace  */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--w1);
  color:var(--paper);
  font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------------- the stage ----------------
   Fixed behind everything. The films live here; the copy scrolls
   over them. ⚠️ 100svh not 100vh — the small viewport unit is the
   one that survives the phone toolbar appearing and disappearing. */
.stage{
  position:fixed; inset:0;
  height:100svh;
  z-index:0;
  overflow:hidden;
  background:var(--w1);
}

/* the stand-in: seven washes of light, cross-faded by a.js.
   Deleted the day the plates land — until then it IS the flight. */
.wp{
  position:absolute; inset:0;
  opacity:0;
  will-change:opacity;
}
.wp--1{background:
  radial-gradient(120% 80% at 50% 96%, rgba(255,255,255,.10), transparent 60%),
  linear-gradient(180deg,#0B2436 0%,#071A2A 46%,#04101C 100%)}
.wp--2{background:
  radial-gradient(70% 34% at 50% 58%, rgba(255,255,255,.55), transparent 62%),
  linear-gradient(180deg,#0C3550 0%,#10617A 52%,#1C8C93 78%,#2AA3A8 100%)}
.wp--3{background:
  radial-gradient(90% 40% at 50% 88%, rgba(255,255,255,.22), transparent 70%),
  linear-gradient(180deg,#BFD9C9 0%,#5FB9B4 28%,#2AA3A8 62%,#1C8C93 100%)}
.wp--4{background:
  radial-gradient(80% 46% at 50% 22%, rgba(255,246,224,.42), transparent 66%),
  linear-gradient(180deg,#2E4A33 0%,#6E8A63 34%,#D8C9A9 72%,#CBB894 100%)}
.wp--5{background:
  radial-gradient(38% 46% at 50% 62%, rgba(200,154,91,.62), transparent 70%),
  linear-gradient(180deg,#2A2018 0%,#1A1410 52%,#120D0A 100%)}
.wp--6{background:
  radial-gradient(70% 60% at 74% 48%, rgba(255,244,224,.72), transparent 72%),
  linear-gradient(180deg,#7A5C3C 0%,#A98A63 44%,#EDE3D2 100%)}
.wp--7{background:
  radial-gradient(90% 44% at 50% 70%, rgba(255,255,255,.24), transparent 68%),
  linear-gradient(180deg,#EDE3D2 0%,#9CC7BE 24%,#2A93A0 56%,#1C7F8C 100%)}

/* the films. object-fit:cover is doing the phone crop, which is why
   the shotlist insists nothing that matters lives in the outer
   thirds of any frame. */
.film{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  pointer-events:none;
}
.film.lit{opacity:1}

/* ---------------- the ground under the type ----------------
   ⚠️ Hairline type needs a ground — "too pale" is never the colour
   ([[feedback_hairline_type_needs_ground]]).

   TWO layers, and the split is deliberate. The vertical wash (::after)
   seats the wordmark at the top and the page's own edges at the bottom.
   The horizontal one (::before) is what actually makes the copy legible,
   because every beat except the door is LEFT-aligned — so the ground is
   put only where the words are and the right two thirds of the picture
   is left completely alone.

   ⚠️ Do not "fix" a legibility problem by darkening the whole frame
   instead. The lagoon beats are the brightest and most valuable plates
   in the piece, and a full-frame scrim is what would kill them
   ([[feedback_dont_paint_over_his_photography]]). Caught on the first
   desktop walk: "This is the line" was unreadable over W3's lagoon. */
.stage::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,
    rgba(6,14,24,.74) 0%, rgba(6,14,24,.62) 14%,
    rgba(6,14,24,.34) 34%, rgba(6,14,24,0) 58%);
  pointer-events:none;
}
.stage::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(6,14,24,.58) 0%, rgba(6,14,24,.16) 26%,
                            rgba(6,14,24,.20) 58%, rgba(6,14,24,.70) 100%);
  pointer-events:none;
}
/* the door beat is centred, so it needs the ground in the middle instead */
body[data-film="5"] .stage::before{
  background:radial-gradient(58% 62% at 50% 50%, rgba(6,14,24,.52), rgba(6,14,24,0) 72%);
}

/* ---------------- furniture ---------------- */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:40;
  background:transparent; pointer-events:none;
}
.progress::after{
  content:""; display:block; height:100%; width:var(--p,0%);
  background:var(--gold); opacity:.85;
}

.nav{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,2.5rem);
  padding-top:calc(1.1rem + env(safe-area-inset-top));
  pointer-events:none;
}
.nav > *{pointer-events:auto}

.brand{
  font-family:'Newsreader',Georgia,serif;
  font-weight:300; font-size:clamp(1.05rem,2.2vw,1.35rem);
  letter-spacing:.06em; text-decoration:none; color:var(--paper);
  transition:opacity .5s ease, transform .5s ease;
}
.brand span{opacity:.62; font-style:italic}
/* The wordmark is 26px of type and was 26px of target. A pseudo pad, so the
   nav line never reflows; position:relative only because it computes `static`. */
.brand{position:relative}
.brand::after{content:"";position:absolute;left:0;right:0;top:50%;
  height:2.75rem;transform:translateY(-50%)}
body.past-open .brand{opacity:0; transform:translateY(-.4em); pointer-events:none}

/* language pill */
.lang{display:flex; gap:.1rem; align-items:center;
  border:1px solid var(--line); border-radius:999px; padding:.18rem; position:relative}
.lang input{position:absolute; opacity:0; width:0; height:0}
.lang label{
  position:relative; font-size:.68rem; letter-spacing:.14em; font-weight:500;
  padding:.34rem .62rem; border-radius:999px; cursor:pointer; opacity:.55;
  transition:opacity .3s ease, background .3s ease;
  /* ⚠️ tap target padded with ::after, never with real padding — real
     padding reflows the header ([[feedback_tap_targets_pseudo_pad]]) */
}
.lang label::after{content:""; position:absolute; inset:-.55rem -.35rem}
.lang input:checked + label{opacity:1; background:rgba(244,239,230,.14)}

/* ---------------- the flight ----------------
   Seven beats, each a screen tall. The section's height is what
   a.js maps the film chain onto, so adding a beat lengthens the
   flight rather than breaking it. */
.flight{position:relative; z-index:10}

.beat{
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(4rem,12vh,9rem) clamp(1.25rem,6vw,4rem);
}
.beat--door{align-items:center; justify-content:center; text-align:center}

.beat__in{max-width:34rem}
.beat--door .beat__in{max-width:26rem}

.kicker{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  opacity:.72; margin:0 0 1.2rem;
}

.beat h1,.beat h2{
  font-family:'Newsreader',Georgia,serif;
  font-weight:200; line-height:1.06; letter-spacing:-.015em;
  margin:0 0 1rem;
  text-wrap:balance;
}
.beat h1{font-size:clamp(2.3rem,6.6vw,4.6rem)}
.beat h2{font-size:clamp(1.9rem,5vw,3.4rem)}
.beat h1 em,.beat h2 em{font-style:italic; color:var(--gold)}

.beat p{
  font-size:clamp(1rem,1.35vw,1.16rem);
  max-width:32rem; margin:0; opacity:.9;
}
.beat p + p{margin-top:.9rem}

/* the arrival of type. ⚠️ Never owns visibility: `.rise` with no JS
   is fully visible, and the class only ever gets ADDED. */
.rise{opacity:1}
.js .rise{opacity:0; transform:translateY(1.1rem);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1)}
.js .rise.in{opacity:1; transform:none}
.js .rise--2{transition-delay:.12s}
.js .rise--3{transition-delay:.22s}
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1; transform:none; transition:none}
}

/* ---------------- after the flight ----------------
   The camera has landed. From here the page stops flying and the
   stage holds the terrace, so the excursions read as choices made
   from where you are standing rather than a catalogue. */
.after{position:relative; z-index:10; background:var(--ink)}
.after__in{
  max-width:64rem; margin:0 auto;
  padding:clamp(4rem,12vh,8rem) clamp(1.25rem,6vw,4rem);
}
.after h2{
  font-family:'Newsreader',Georgia,serif; font-weight:200;
  font-size:clamp(1.9rem,5vw,3.2rem); line-height:1.08; margin:0 0 2.4rem;
}
.after h2 em{font-style:italic; color:var(--gold)}

/* ⚠️ NOT a card grid. Each excursion is a line laid on the horizon
   you are already looking at — a rule, a name, a time, a sentence.
   Cards were killed on sight ([[feedback_one_spine_not_sections]]). */
.horizon{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.horizon li{
  border-bottom:1px solid var(--line);
  padding:1.5rem 0;
  display:grid; gap:.35rem .5rem;
  grid-template-columns:1fr auto;
  align-items:baseline;
}
.horizon .x__name{
  font-family:'Newsreader',Georgia,serif; font-weight:300;
  font-size:clamp(1.2rem,2.6vw,1.7rem);
}
.horizon .x__when{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; opacity:.62;
  text-align:right;
}
.horizon .x__note{grid-column:1/-1; font-size:.98rem; opacity:.78; max-width:44rem; margin:0}
/* The last excursion's rule and .ask's own rule sat two lines apart with a
   dead band between them, which read as an empty fifth excursion. The list
   closes on the ask's rule instead. Caught on the first desktop walk. */
.horizon li:last-child{border-bottom:0}

/* the ask */
.ask{border-top:1px solid var(--line); margin-top:clamp(3rem,8vh,5rem); padding-top:clamp(2.5rem,7vh,4rem)}
.ask p{font-size:clamp(1rem,1.35vw,1.16rem); max-width:36rem; opacity:.9}
.ask .whole{color:var(--gold); font-style:italic; font-family:'Newsreader',Georgia,serif}

.foot{
  border-top:1px solid var(--line); margin-top:clamp(3rem,8vh,5rem);
  padding:2rem 0 0; font-size:.76rem; opacity:.5; line-height:1.7;
}

/* ---------------- the way back ----------------
   Amenti was the one row on the switchboard with no door out of it: the other
   sixteen demos all carry this pill and this one shipped without any link but
   its own wordmark, so a visitor who walked in from /work/ on a phone had the
   browser's own back button or nothing.

   ⚠️ THE HREF STAYS RELATIVE. A hard-coded pages.dev address would print the
   studio's own host in the raw bytes on the Mauritian door — the same leak the
   og:url rewrite exists to close ([[project_maat_notaire]]). Relative, the
   middleware's root redirect carries it to indianoceandigital.com/work/ even
   with JavaScript off.

   Ground is w1 — open ocean — rather than the flat ink, because the pill has to
   hold at every waypoint including the beach and the terrace, where the stage
   goes pale behind it. */
.sn-back{
  position:fixed; left:max(1rem,env(safe-area-inset-left));
  bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:50;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem .5rem .72rem; border-radius:999px;
  background:rgba(6,18,31,.72); color:var(--paper);
  font-family:'Geist',system-ui,-apple-system,sans-serif;
  font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(0,0,0,.24);
  transition:background .25s ease, transform .25s ease, opacity .25s ease;
  opacity:.88;
}

/* The chevron is the house arrow on all 22 pages. `flex:none` so the pill
   never squeezes it, `currentColor` in the markup so it takes the link's ink. */
.sn-back svg{flex:none}
.sn-back:hover{background:rgba(6,18,31,.9); transform:translateY(-1px); opacity:1}
.sn-back:focus-visible{outline:2px solid var(--gold); outline-offset:3px; opacity:1}
@media print{.sn-back{display:none}}

/* ---------------- the two columns ----------------
   Both languages ship in the markup and CSS chooses, so switching
   never refetches and never flashes. House pattern. */
.lang-en .fr,.lang-fr .en{display:none}

/* ---------------- phone ----------------
   ⚠️ Verified at 375px against real Safari height (~730pt), not the
   pane's 812 ([[feedback_verify_mobile_before_ship]]). */
@media (max-width:47.99em){
  /* The pill measures 35px of ink and needs 44 of target. A pseudo-element,
     never real padding — real padding grows the pill itself
     ([[feedback_tap_targets_pseudo_pad]]). Nothing else is fixed to this
     corner, so the pad has the room. */
  .sn-back::before{content:""; position:absolute; inset:-6px -12px}

  .beat{padding-left:1.25rem; padding-right:1.25rem}
  .horizon li{grid-template-columns:1fr}
  .horizon .x__when{text-align:left}

  /* ⚠️ THE HORIZONTAL SCRIM COMES OFF ON A PHONE — two reasons, and the
     second is a visible fault rather than a nicety.
     1. It protects a left column that does not exist at 375px: the copy
        runs nearly the full width, so there is nothing to shield.
     2. Its 58% stop lands MID-SKY on a narrow viewport, and against a flat
        pale plate that produces a hard vertical band you can see straight
        away. On a wide screen the same stop fell harmlessly out of frame.
        Caught at 375x730, invisible at 1440 ([[feedback_verify_mobile_before_ship]]).
     The vertical wash takes over instead, with the middle held flat so it
     cannot band either. */
  .stage::before{background:none}
  body[data-film="5"] .stage::before{background:none}
  .stage::after{
    background:linear-gradient(180deg,
      rgba(6,14,24,.66) 0%, rgba(6,14,24,.36) 32%,
      rgba(6,14,24,.36) 64%, rgba(6,14,24,.76) 100%);
  }
}