@charset "UTF-8";

/* ==========================================================================
   AmsterdamBliss.com — Coming Soon
   A single screen. Type, light, water.

   1. Tokens
   2. Reset & document
   3. Scene (the canal, drawn in CSS — no image files)
   4. Veil & grain
   5. Typography
   6. Entrance
   7. Responsive
   8. Motion & display preferences
   ========================================================================== */


/* 1. Tokens ---------------------------------------------------------------- */

:root {
  /* Palette — warm white, soft ivory, deep navy, muted emerald, champagne */
  --c-ink:          #1b2a33;   /* deep navy, the wordmark            */
  --c-ink-soft:     #41525a;   /* the tld                            */
  --c-ink-muted:    #46565e;   /* eyebrow                            */
  --c-ink-quiet:    #35444c;   /* tagline                            */
  --c-warm-white:   254 250 243;   /* rgb triplet: composed with alpha below */
  --c-ivory:        #f7f0e3;
  --c-champagne:    255 240 206;
  --c-emerald:      #c0c8bc;   /* muted, only ever in the water      */

  /* Composition */
  --horizon: 57%;
  --gutter: clamp(1.5rem, 5vw, 4.5rem);

  /* Motion */
  --ease: cubic-bezier(.16, .84, .44, 1);
  --ease-soft: cubic-bezier(.36, .06, .28, 1);

  /* Pointer parallax, written by script.js, range -1 … 1 */
  --px: 0;
  --py: 0;

  /* Silhouettes: inline SVG, blurred at rasterisation so the slow drifts
     below stay pure compositor work. Injected once, reused by the reflection. */
  --img-facades: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%203200%20470'%20preserveAspectRatio='xMidYMax%20slice'%3E%3Cfilter%20id='b'%20x='-12%25'%20y='-30%25'%20width='124%25'%20height='170%25'%20color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur%20stdDeviation='9'/%3E%3C/filter%3E%3Cg%20filter='url(%23b)'%20fill='%2523203039'%20fill-opacity='.93'%3EM-190%20470V236H74V470ZM74%20470V220V205H90V190H106V175H122V160H138V175H154V190H170V205H186V220V470ZM186%20470V220C186%20190%20206%20166%20246%20162C286%20166%20306%20190%20306%20220V470ZM306%20470V186V174Q324%20166%20340%20142V136H384V142Q400%20166%20418%20174V186V470ZM418%20470V220L444%20186L444%20174L512%20174L512%20186V470ZM538%20470V162V147H555V132H572V117H589V102H607V117H624V132H641V147H658V162V470ZM658%20470V220H754V470ZM754%20470V186C754%20156%20774%20132%20814%20128C854%20132%20874%20156%20874%20186V470ZM920%20470V220V208Q940%20200%20956%20176V170H1004V176Q1020%20200%201040%20208V220V470ZM1040%20470V148V133H1054V118H1067V103H1081V88H1095V103H1109V118H1122V133H1136V148V470ZM1136%20470V172L1192%20128L1248%20172V470ZM1248%20470V148L1269%20114L1269%20102L1323%20102L1323%20114V470ZM1344%20470V220C1344%20190%201364%20166%201404%20162C1444%20166%201464%20190%201464%20220V470ZM1464%20470V208H1592V470ZM1592%20470V196V181H1604V166H1616V151H1628V136H1640V151H1652V166H1664V181H1676V196V470ZM1710%20470V208V196Q1728%20188%201744%20164V158H1788V164Q1804%20188%201822%20196V208V470ZM1822%20470V196C1822%20166%201844%20142%201886%20138C1928%20142%201950%20166%201950%20196V470ZM1950%20470V162V147H1968V132H1987V117H2005V102H2023V117H2041V132H2060V147H2078V162V470ZM2078%20470V148C2078%20118%202098%2094%202138%2090C2178%2094%202198%20118%202198%20148V470ZM2198%20470V148V136Q2218%20128%202234%20104V98H2282V104Q2298%20128%202318%20136V148V470ZM2318%20470V148L2336%20114L2336%20102L2384%20102L2384%20114V470ZM2402%20470V162V147H2416V132H2429V117H2443V102H2457V117H2471V132H2484V147H2498V162V470ZM2544%20470V220H2628V470ZM2628%20470V172C2628%20142%202647%20118%202684%20114C2721%20118%202740%20142%202740%20172V470ZM2740%20470V196V184Q2758%20176%202774%20152V146H2818V152Q2834%20176%202852%20184V196V470ZM2852%20470V196V181H2866V166H2879V151H2893V136H2907V151H2921V166H2934V181H2948V196V470ZM2948%20470V208L2996%20164L3044%20208V470ZM3044%20470V236H3390V470Z%3Cellipse%20cx='240'%20cy='326'%20rx='73'%20ry='54'/%3E%3Cellipse%20cx='262'%20cy='342'%20rx='73'%20ry='54'/%3E%3Cellipse%20cx='288'%20cy='342'%20rx='94'%20ry='70'/%3E%3Cellipse%20cx='1010'%20cy='326'%20rx='84'%20ry='62'/%3E%3Cellipse%20cx='1036'%20cy='326'%20rx='73'%20ry='54'/%3E%3Cellipse%20cx='1062'%20cy='342'%20rx='84'%20ry='62'/%3E%3Cellipse%20cx='1720'%20cy='326'%20rx='73'%20ry='54'/%3E%3Cellipse%20cx='1748'%20cy='358'%20rx='84'%20ry='62'/%3E%3Cellipse%20cx='2402'%20cy='326'%20rx='73'%20ry='54'/%3E%3Cellipse%20cx='2430'%20cy='342'%20rx='73'%20ry='54'/%3E%3Cellipse%20cx='2456'%20cy='342'%20rx='73'%20ry='54'/%3E%3Cellipse%20cx='2980'%20cy='358'%20rx='84'%20ry='62'/%3E%3C/g%3E%3C/svg%3E");
  --img-ridge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%203200%20470'%20preserveAspectRatio='xMidYMax%20slice'%3E%3Cfilter%20id='b'%20x='-12%25'%20y='-30%25'%20width='124%25'%20height='170%25'%20color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur%20stdDeviation='17'/%3E%3C/filter%3E%3Cg%20filter='url(%23b)'%20fill='%25235B6B70'%20fill-opacity='.5'%3EM-190%20470V300H-14V470ZM-14%20470V346L25%20312L25%20300L123%20300L123%20312V470ZM162%20470V318H338V470ZM338%20470V346H514V470ZM514%20470V358L547%20324L547%20312L629%20312L629%20324V470ZM662%20470V300H782V470ZM782%20470V346H986V470ZM986%20470V332H1190V470ZM1190%20470V300L1264%20256L1338%20300V470ZM1338%20470V358H1486V470ZM1486%20470V358L1574%20314L1662%20358V470ZM1662%20470V332H1838V470ZM1838%20470V318L1883%20284L1883%20272L1997%20272L1997%20284V470ZM2042%20470V318H2246V470ZM2246%20470V358L2320%20314L2394%20358V470ZM2394%20470V358H2542V470ZM2542%20470V300L2568%20266L2568%20254L2636%20254L2636%20266V470ZM2662%20470V358L2722%20314L2782%20358V470ZM2782%20470V358L2870%20314L2958%20358V470ZM2958%20470V332L3018%20288L3078%20332V470ZM3078%20470V346H3254V470ZM3254%20470V318H3430V470ZM2074%20470V262L2086%20196L2098%20262V470Z%3C/g%3E%3C/svg%3E");

  /* Film grain */
  --img-grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.82'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='180'%20height='180'%20filter='url(%23g)'%20opacity='.55'/%3E%3C/svg%3E");
}

/* Metric-matched fallback: holds the layout still while Cormorant loads. */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 88%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}


/* 2. Reset & document ------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow: hidden;
  background: var(--c-ivory);
  color: var(--c-ink);
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* 3. Scene ----------------------------------------------------------------- */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  animation: scene-in 3.8s var(--ease) both;
}

.scene > * {
  position: absolute;
  pointer-events: none;
}

/* Sky, low sun, water — one continuous gradient broken only at the waterline */
.scene__sky {
  inset: 0;
  background: linear-gradient(180deg,
    #e6d5b9  0%,
    #ecdfc9 15%,
    #f3e9d7 31%,
    #f9f2e6 45%,
    rgb(var(--c-warm-white)) 53%,
    #fcf7ee var(--horizon),
    #e7e3d6 calc(var(--horizon) + .4%),
    #dedcce 66%,
    #cfd4c7 81%,
    var(--c-emerald) 100%);
}

/* The sun itself is never in frame — only its bloom */
.scene__bloom {
  left: 0;
  top: 0;
  right: 0;
  height: var(--horizon);
  background:
    radial-gradient(30% 46% at 68% 88%,
      rgb(var(--c-champagne) / .95), rgb(var(--c-champagne) / 0) 68%),
    radial-gradient(56% 78% at 66% 74%,
      rgb(var(--c-champagne) / .58), rgb(var(--c-champagne) / 0) 72%);
  translate: calc(var(--px) * 16px) calc(var(--py) * 9px);
  animation: bloom 52s var(--ease-soft) infinite alternate;
}

/* Far bank — paler, flatter, dissolved by distance */
.scene__ridge {
  left: -8%;
  width: 116%;
  bottom: calc(100% - var(--horizon));
  height: clamp(80px, 17vh, 200px);
  background: var(--img-ridge) center bottom / auto 100% repeat-x;
  opacity: .55;
  translate: calc(var(--px) * 5px) calc(var(--py) * 3px);
  animation: drift-far 96s var(--ease-soft) infinite alternate;
}

/* Near bank — gables only, backlit, tops eaten by the morning haze */
.scene__facades {
  left: -8%;
  width: 116%;
  bottom: calc(100% - var(--horizon));
  height: clamp(140px, 26vh, 300px);
  background: var(--img-facades) center bottom / auto 100% repeat-x;
  opacity: .56;
  -webkit-mask-image: linear-gradient(to top, #000 34%, rgba(0, 0, 0, .36) 68%, rgba(0, 0, 0, .12) 100%);
          mask-image: linear-gradient(to top, #000 34%, rgba(0, 0, 0, .36) 68%, rgba(0, 0, 0, .12) 100%);
  translate: calc(var(--px) * 11px) calc(var(--py) * 6px);
  animation: drift-near 74s var(--ease-soft) infinite alternate;
}

/* The same façades, folded into the water and shortened by the viewing angle */
.scene__mirror {
  left: -8%;
  width: 116%;
  bottom: calc(100% - var(--horizon));
  height: clamp(140px, 26vh, 300px);
  background: var(--img-facades) center bottom / auto 100% repeat-x;
  transform-origin: 50% 100%;
  transform: scaleY(-.76);
  filter: blur(3px);
  opacity: .2;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .38) 44%, rgba(0, 0, 0, 0) 88%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .38) 44%, rgba(0, 0, 0, 0) 88%);
  translate: calc(var(--px) * 11px) calc(var(--py) * 6px);
  animation: drift-mirror 74s var(--ease-soft) infinite alternate;
}

/* Where the low sun lands on the canal */
.scene__sheen {
  left: 0;
  right: 0;
  top: var(--horizon);
  bottom: 0;
  background: radial-gradient(34% 88% at 68% 0%,
    rgb(var(--c-champagne) / .55), rgb(var(--c-champagne) / 0) 72%);
  animation: sheen 30s var(--ease-soft) infinite alternate;
}

/* Slow, shallow water — a 26px band that loops exactly, so it never seams */
.scene__ripples {
  left: 0;
  right: 0;
  top: var(--horizon);
  bottom: -30px;
  background: repeating-linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, .13) 7px,
    rgba(255, 255, 255, 0) 14px,
    rgba(255, 255, 255, 0) 26px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 60%, transparent 96%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 60%, transparent 96%);
  animation: ripples 24s linear infinite;
}

/* Haze sitting on the waterline, which is what softens the fold */
.scene__haze {
  left: 0;
  right: 0;
  top: calc(var(--horizon) - 24%);
  height: 42%;
  background: linear-gradient(180deg,
    rgb(var(--c-warm-white) / 0) 0%,
    rgb(var(--c-warm-white) / .8) 46%,
    rgb(var(--c-warm-white) / .58) 66%,
    rgb(var(--c-warm-white) / 0) 100%);
  animation: haze 38s var(--ease-soft) infinite alternate;
}

.scene__motes {
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene__vignette {
  inset: 0;
  background: radial-gradient(128% 104% at 50% 44%,
    rgba(60, 52, 38, 0) 38%,
    rgba(60, 52, 38, .11) 74%,
    rgba(48, 43, 32, .24) 100%);
}


/* 4. Veil & grain ---------------------------------------------------------- */

/* Glass: an unedged bloom of light that lifts the type off the façades */
.veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(86% 42% at 50% 50%,
    rgb(var(--c-warm-white) / .8) 0%,
    rgb(var(--c-warm-white) / .42) 52%,
    rgb(var(--c-warm-white) / 0) 82%);
  -webkit-backdrop-filter: blur(12px) saturate(104%);
          backdrop-filter: blur(12px) saturate(104%);
  -webkit-mask-image: radial-gradient(90% 48% at 50% 50%, #000 40%, transparent 84%);
          mask-image: radial-gradient(90% 48% at 50% 50%, #000 40%, transparent 84%);
  animation: veil-in 4.2s var(--ease) both;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--img-grain) repeat;
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  opacity: .55;
}


/* 5. Typography ------------------------------------------------------------ */

.stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  padding: max(var(--gutter), env(safe-area-inset-top, 0px)) var(--gutter)
           max(var(--gutter), env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.wordmark {
  margin: 0;
  font-weight: 500;
  font-size: clamp(2.5rem, 7.3vw, 8.5rem);
  line-height: .96;
  letter-spacing: .055em;
  padding-left: .055em;          /* returns the trailing letter-space, so every line optically centres */
  text-transform: uppercase;
  color: var(--c-ink);
  text-wrap: balance;
}

.wordmark__tld {
  font-size: .4em;
  letter-spacing: .1em;
  color: var(--c-ink-soft);
  margin-left: .1em;
}

.eyebrow {
  margin: clamp(1.7rem, 3.6vh, 3rem) 0 0;
  font-family: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: clamp(.66rem, .55rem + .28vw, .8rem);
  line-height: 1;
  letter-spacing: .44em;
  padding-left: .44em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.tagline {
  margin: clamp(1rem, 2.1vh, 1.6rem) 0 0;
  max-width: 34ch;
  font-weight: 400;
  font-size: clamp(1rem, .86rem + .5vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: .085em;
  padding-left: .085em;
  color: var(--c-ink-quiet);
  text-wrap: balance;
}


/* 6. Entrance -------------------------------------------------------------- */

/* Rack focus: the page arrives the way the photograph would — out of focus
   first, then settling. Held back until the webfont is ready (script.js), so
   the swap is never visible. */
.reveal {
  --rv-y: 16px;
  --rv-blur: 8px;
  --rv-dur: 1.5s;
  --rv-delay: 0s;
}

.reveal--1 { --rv-y: 24px; --rv-blur: 15px; --rv-dur: 2.1s; }
.reveal--2 { --rv-delay: .5s; }
.reveal--3 { --rv-delay: .74s; --rv-dur: 1.7s; }

.js .reveal {
  opacity: 0;
  transform: translate3d(0, var(--rv-y), 0);
  filter: blur(var(--rv-blur));
  will-change: opacity, transform, filter;
}

.js.is-ready .reveal {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity   var(--rv-dur) var(--ease) var(--rv-delay),
    transform var(--rv-dur) var(--ease) var(--rv-delay),
    filter    var(--rv-dur) var(--ease) var(--rv-delay);
}

.js.is-settled .reveal { will-change: auto; }

@keyframes scene-in {
  from { opacity: 0; transform: scale(1.055); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes veil-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bloom {
  from { transform: translate3d(-1.6%, .8%, 0) scale(1);    opacity: .86; }
  to   { transform: translate3d(1.6%, -.8%, 0) scale(1.06); opacity: 1; }
}

@keyframes drift-near {
  from { transform: translate3d(-9px, 0, 0); }
  to   { transform: translate3d(9px, 0, 0); }
}

@keyframes drift-mirror {
  from { transform: scaleY(-.76) translate3d(-9px, 0, 0); }
  to   { transform: scaleY(-.76) translate3d(9px, 0, 0); }
}

@keyframes drift-far {
  from { transform: translate3d(-4px, 0, 0); }
  to   { transform: translate3d(4px, 0, 0); }
}

@keyframes sheen {
  from { opacity: .72; }
  to   { opacity: 1; }
}

@keyframes ripples {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -26px, 0); }
}

@keyframes haze {
  from { opacity: .74; transform: scaleY(1); }
  to   { opacity: 1;   transform: scaleY(1.08); }
}


/* 7. Responsive ------------------------------------------------------------ */

/* Tablet — the horizon drops slightly as the frame squares up */
@media (max-width: 1024px) {
  :root { --horizon: 58%; }
  .wordmark { font-size: clamp(2.5rem, 7.6vw, 5.4rem); }
}

/* Phone — the domain breaks to two lines and stays optically centred */
@media (max-width: 600px) {
  :root { --horizon: 60%; }

  .wordmark {
    font-size: clamp(2.9rem, 12.6vw, 4.6rem);
    letter-spacing: .04em;
    padding-left: .04em;
    line-height: 1.02;
  }

  .wordmark__lead { display: block; }
  .wordmark__tld { font-size: .42em; }

  .eyebrow { letter-spacing: .36em; padding-left: .36em; }
  .tagline { max-width: 26ch; letter-spacing: .06em; padding-left: .06em; }

  /* A full-frame backdrop blur is not worth its cost on a phone GPU */
  .veil {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: radial-gradient(72% 42% at 50% 50%,
      rgb(var(--c-warm-white) / .84) 0%,
      rgb(var(--c-warm-white) / .5) 52%,
      rgb(var(--c-warm-white) / 0) 82%);
  }
}

/* Landscape phones and short windows — keep it to one screen */
@media (max-height: 560px) and (orientation: landscape) {
  :root { --horizon: 56%; }
  .wordmark { font-size: clamp(1.9rem, 6.4vw, 3.4rem); }
  .wordmark__lead { display: inline; }
  .eyebrow { margin-top: 1.1rem; }
  .tagline { margin-top: .7rem; font-size: .95rem; }
  .scene__facades,
  .scene__mirror { height: clamp(110px, 22vh, 200px); }
}

/* Very wide screens — type stops growing before it loses its poise */
@media (min-width: 1800px) {
  .wordmark { font-size: 8.5rem; }
  .tagline { font-size: 1.35rem; }
}


/* 8. Motion & display preferences ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .scene,
  .veil,
  .scene__bloom,
  .scene__ridge,
  .scene__facades,
  .scene__mirror,
  .scene__sheen,
  .scene__ripples,
  .scene__haze {
    animation: none !important;
  }

  .scene__mirror { transform: scaleY(-.76); }
  .scene__motes { display: none; }

  .js .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    will-change: auto;
  }

  .js.is-ready .reveal { transition: opacity .01ms; }
}

@media (prefers-contrast: more) {
  .veil {
    background: radial-gradient(70% 56% at 50% 50%,
      rgb(var(--c-warm-white) / .95) 0%,
      rgb(var(--c-warm-white) / .72) 52%,
      rgb(var(--c-warm-white) / 0) 82%);
  }
  .scene__facades { opacity: .45; }
  .grain { opacity: .3; }
}

@media print {
  .scene, .veil, .grain { display: none; }
  .stage { height: auto; padding: 4rem 0; }
}