/* Better Days Sauna & Cafe — coming soon.
   One screen: the sky still, "Coming Soon", the logo, an e-mail field. */

@font-face {
  font-family: "NT Wagner";
  src: url("../assets/fonts/nt-wagner.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Roca";
  src: url("../assets/fonts/roca-bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --cream: #fcfbe5;
  --orange: #ff5500;
  --field-ink: #23384a;
  --sky: #004d87;
  --s: min(max(1vw, 11px), 1.78vh);   /* one unit of the layout: everything scales together. Floor of 11px keeps small tablets in proportion */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--sky); color: var(--cream); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.home { position: fixed; inset: 0; overflow: hidden; isolation: isolate; }

.home__sky { position: absolute; inset: -20%; width: 140%; height: 140%; max-width: none; object-fit: cover; object-position: 50% 50%; }

/* film grain over everything, photograph and type alike: fine noise re-seated 12 times a second, so it shimmers like a scan instead of sliding */
.home__grain { position: absolute; inset: -200px; z-index: 6; pointer-events: none; mix-blend-mode: overlay; opacity: .42;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px; animation: grain 1s steps(1) infinite; will-change: transform; }
@keyframes grain { 0.0% { transform: translate3d(-60px, -25px, 0); } 8.33% { transform: translate3d(-128px, 22px, 0); } 16.67% { transform: translate3d(65px, -101px, 0); } 25.0% { transform: translate3d(-134px, -146px, 0); } 33.33% { transform: translate3d(-170px, 25px, 0); } 41.67% { transform: translate3d(101px, -32px, 0); } 50.0% { transform: translate3d(-150px, -67px, 0); } 58.33% { transform: translate3d(86px, 94px, 0); } 66.67% { transform: translate3d(4px, -39px, 0); } 75.0% { transform: translate3d(-92px, -126px, 0); } 83.33% { transform: translate3d(-46px, -71px, 0); } 91.67% { transform: translate3d(-167px, 148px, 0); } }
@media (prefers-reduced-motion: reduce) { .home__grain { animation: none; } }

/* light parallax (js/cursor.js): the sky leans a few pixels against the cursor.
   Without the script this does nothing (--px / --py stay at 0). Raise or lower the vw numbers to taste. */
.home__sky { transform: translate3d(calc(var(--px, 0) * -.34vw), calc(var(--py, 0) * -.24vw), 0); will-change: transform; }

/* shown only on the owner's device while it previews settings from /admin that are not published yet */
.home__preview { position: absolute; z-index: 7; left: 14px; bottom: 14px; padding: 8px 13px; border-radius: 999px; background: rgba(255, 251, 228, .94); color: #23384a; font: 700 12px/1 "Roca", Georgia, serif; text-decoration: none; box-shadow: 0 2px 10px rgba(0, 30, 60, .25); }

/* review only: the style switch that appears with ?style=N */
.home__review { position: absolute; z-index: 7; left: 50%; top: 12px; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(16, 26, 24, .8); font: 700 12px/1 "Roca", Georgia, serif; white-space: nowrap; }
.home__review a { padding: 7px 11px; border-radius: 999px; color: var(--cream); text-decoration: none; opacity: .75; }
.home__review a:hover { opacity: 1; }
.home__review a[aria-current] { background: var(--orange); opacity: 1; }

.home__stack { position: absolute; z-index: 2; left: 0; right: 0; top: calc(47% - var(--s) * 10.31 - var(--lift, 0px)); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 0 20px; text-align: center; }

.home__soon { margin: 0 0 calc(var(--s) * 1.9); font-family: "NT Wagner", "Cooper Black", Georgia, serif; font-weight: 400; font-size: max(22px, calc(var(--s) * 3.05)); line-height: 1; letter-spacing: -.01em; }

.home__title { margin: 0; }
.home__logo { display: block; margin: calc(var(--s) * -.7) 0; width: max(261px, calc(var(--s) * 35.46)); aspect-ratio: 1460 / 421; background: var(--cream);
  -webkit-mask: url("../assets/logo-mask.png") center / contain no-repeat; mask: url("../assets/logo-mask.png") center / contain no-repeat; }


.actions { position: relative; z-index: 1; margin-top: calc(var(--s) * 3.1); display: flex; flex-wrap: wrap; justify-content: center; gap: max(10px, calc(var(--s) * .95)); }
.cta { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; height: max(44px, calc(var(--s) * 3.75)); padding: 0 1.7em; border: 2px solid var(--orange); border-radius: 999px; background: var(--orange); color: var(--cream); text-decoration: none; font-family: "Roca", Georgia, serif; font-weight: 700; font-size: max(15px, calc(var(--s) * 1.18)); letter-spacing: .01em; box-shadow: 0 2px 10px rgba(0, 30, 60, .16); transition: filter .25s ease, transform .25s var(--ease); }
.cta:hover { filter: brightness(1.08); }
.cta:active { transform: scale(.97); }
.cta:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.home__insta { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; gap: .45em; height: max(44px, calc(var(--s) * 3.75)); padding: 0 1.35em 0 1.1em; border: 2px solid var(--orange); border-radius: 999px; background: #fff; color: var(--orange); text-decoration: none; font-family: "Roca", Georgia, serif; font-weight: 700; font-size: max(15px, calc(var(--s) * 1.18)); letter-spacing: .01em; box-shadow: 0 2px 10px rgba(0, 30, 60, .16); transition: background-color .25s ease, color .25s ease; }
.home__insta svg { width: 1.3em; height: 1.3em; flex: none; }
.home__insta:hover { background: var(--orange); color: var(--cream); }
.home__insta:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

/* the information box under the buttons: deep sky blue with the orange stroke, cream lettering (never white: it sits on white cloud). Words come from settings / admin. */
.home__info { margin: max(14px, calc(var(--s) * 1.5)) 0 0; width: min(100%, calc(var(--s) * 41)); max-height: min(34vh, 15em); overflow-y: auto; padding: max(12px, calc(var(--s) * 1.05)) max(16px, calc(var(--s) * 1.6)); border: 2px solid var(--orange); border-radius: max(16px, calc(var(--s) * 1.5)); background: rgba(0, 70, 126, .9); color: var(--cream); font-family: "Roca", Georgia, serif; font-weight: 700; font-size: max(14px, calc(var(--s) * 1.05)); line-height: 1.45; text-align: center; white-space: pre-line; box-shadow: 0 2px 10px rgba(0, 30, 60, .16); }
.home__info[hidden] { display: none; }

/* the four looks of the information box (settings.js: BD_INFO_STYLE, /admin, or ?style=1..4). 1 = the panel above. */
/* 2 · Badge: orange, with the cream pinstripe set in from the edge like the brand badges */
.home__info[data-style="2"] { border: 0; background: var(--orange); color: var(--cream); padding: max(16px, calc(var(--s) * 1.5)) max(20px, calc(var(--s) * 2.1)); border-radius: max(18px, calc(var(--s) * 1.7)); outline: 2px solid var(--cream); outline-offset: min(-5px, calc(var(--s) * -.42)); font-size: max(14px, calc(var(--s) * 1.08)); }
/* 3 · Haze: no box. Cream lettering on a soft patch of deeper sky, under a short orange rule */
.home__info[data-style="3"] { position: relative; overflow: visible; max-height: none; border: 0; background: none; box-shadow: none; padding: max(14px, calc(var(--s) * 1.35)) 0 0; font-size: max(15px, calc(var(--s) * 1.16)); line-height: 1.5; text-shadow: 0 1px 3px rgba(0, 38, 76, .85), 0 0 calc(var(--s) * 1) rgba(0, 48, 96, .8); }
.home__info[data-style="3"]::before { content: ""; position: absolute; z-index: -1; inset: -22% -12% -42%; border-radius: 40%; background: rgba(0, 60, 112, .6); filter: blur(calc(var(--s) * 2.6 + 14px)); }
.home__info[data-style="3"]::after { content: ""; position: absolute; left: 50%; top: 0; width: max(44px, calc(var(--s) * 4.6)); height: 2px; transform: translateX(-50%); background: var(--orange); }
/* 4 · Headline: no box. Large slanted orange lettering with a cream halo, the way the brand sets its italics */
.home__info[data-style="4"] { overflow: visible; max-height: none; width: min(100%, calc(var(--s) * 50)); border: 0; background: none; box-shadow: none; padding: 0; color: var(--orange); font-family: "NT Wagner", Georgia, serif; font-weight: 400; font-style: italic; font-size: max(19px, calc(var(--s) * 1.72)); line-height: 1.14; letter-spacing: -.012em; text-shadow: 1px 0 0 var(--cream), -1px 0 0 var(--cream), 0 1px 0 var(--cream), 0 -1px 0 var(--cream), 1px 1px 0 var(--cream), -1px -1px 0 var(--cream), 1px -1px 0 var(--cream), -1px 1px 0 var(--cream), 0 2px 10px rgba(0, 40, 80, .35); }

/* retro glow (settings.js: BD_GLOW; preview with ?glow=on): bloom + halation on everything that sits over the photograph.
   A tight pale halo softens the edges; the wider red-orange bleed is what film does around bright things. */
.fx { --bloom: rgba(255, 243, 224, .62); --hal: rgba(255, 94, 32, .44); --hal-wide: rgba(255, 76, 22, .22);
  --g1: max(1px, calc(var(--s) * .1)); --g2: max(4px, calc(var(--s) * .6)); --g3: max(11px, calc(var(--s) * 2)); }
.fx .home__soon { text-shadow: 0 0 var(--g1) var(--bloom), 0 0 var(--g2) var(--hal), 0 0 var(--g3) var(--hal-wide); }
.fx .home__info[data-style="3"], .fx .home__info[data-style="4"] { box-shadow: none; }
.fx .cta, .fx .home__insta, .fx .home__info:not([data-style="3"]):not([data-style="4"]) { box-shadow: 0 0 var(--g1) var(--bloom), 0 0 var(--g2) var(--hal), 0 0 var(--g3) var(--hal-wide); }
.fx .home__title { filter: drop-shadow(0 0 var(--g1) var(--bloom)) drop-shadow(0 0 var(--g2) rgba(255, 94, 32, .36)) drop-shadow(0 0 var(--g3) rgba(255, 76, 22, .16)); }


@media (max-width: 560px) {
  :root { --s: 1vw; }
  .home__stack { top: calc(44% - 21.32vw - 25px - var(--lift, 0px)); }
  .home__soon { font-size: 7.4vw; margin-bottom: 5vw; }
  .home__logo { width: 82vw; }
  .actions { margin-top: 8vw; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; width: 100%; padding: 0 2vw; }
  .cta, .home__insta { height: 50px; padding: 0 .6em; font-size: 16px; }
  .home__info { width: calc(100% - 4vw); margin-top: 12px; padding: 12px 16px; font-size: 15px; max-height: 30vh; }
  .home__info[data-style="2"] { padding: 16px 20px; font-size: 15px; }
  .home__info[data-style="3"] { width: calc(100% - 4vw); padding: 14px 0 0; font-size: 16px; max-height: none; }
  .home__info[data-style="4"] { width: calc(100% - 2vw); padding: 0; font-size: 21px; max-height: none; }
  .home__review { top: auto; bottom: 12px; }
  .home__review { font-size: 11px; } .home__review a { padding: 7px 8px; }
}
@media (max-height: 430px) {
  .home__stack { top: calc(50% - var(--s) * 10.31 - var(--lift, 0px)); }
}

@media (prefers-reduced-motion: no-preference) {
  /* the only motion: a single soft fade when the page opens */
  .home__sky { opacity: 0; animation: develop 1.6s ease .1s forwards; }
  .home__soon, .home__logo, .actions, .home__info, .clock { opacity: 0; animation: develop 1.2s ease forwards; }
  .home__soon { animation-delay: .45s; } .home__logo { animation-delay: .6s; } .actions { animation-delay: .8s; } .home__info { animation-delay: .95s; } .clock { animation-delay: 1.15s; }
}
@keyframes develop { to { opacity: 1; } }