/* Sturdy & Sons — shared styles for every page of the concept site.
   Tailwind (CDN) handles utilities; this file holds the things Tailwind can't. */

body { font-family: 'Barlow', system-ui, sans-serif; }
.font-display { font-family: 'Barlow Condensed', system-ui, sans-serif; }
.font-serif { font-family: 'Fraunces', Georgia, serif; }
.tnum { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid #E8703A; outline-offset: 3px; border-radius: 2px; }

/* Spec-work menu: hamburger -> X */
#specBtn.open .l1 { transform: translateY(5px) rotate(45deg); }
#specBtn.open .l2 { opacity: 0; }
#specBtn.open .l3 { transform: translateY(-5px) rotate(-45deg); }
.spec-line { transition: transform .3s ease, opacity .2s ease; }

/* Scroll reveals. Hidden states only apply once JS has added .js to <html>,
   so the page is fully readable if scripts fail. */
.js .reveal { opacity: 0; transform: translateY(26px) rotate(var(--rot, 0deg)); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.js .reveal[data-dir="left"]  { transform: translateX(-40px) rotate(var(--rot, 0deg)); }
.js .reveal[data-dir="right"] { transform: translateX(40px) rotate(var(--rot, 0deg)); }
.js .reveal[data-dir="pop"]   { transform: translateY(16px) scale(.95) rotate(var(--rot, 0deg)); }
.js .reveal.in { opacity: 1; transform: rotate(var(--rot, 0deg)); }

/* Paper grain */
.paper-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.notch { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.notch-bl { clip-path: polygon(0 26px, 26px 0, 100% 0, 100% 100%, 0 100%); }
.pin-1 { --rot: -1.4deg; transform: rotate(var(--rot)); }
.pin-2 { --rot: 1.1deg; transform: rotate(var(--rot)); }
.pin-3 { --rot: -.6deg; transform: rotate(var(--rot)); }
.stamp-text { letter-spacing: .22em; }

/* Text links with an arrow that leans forward on hover */
.go { display: inline-flex; align-items: center; gap: .5rem; }
.go svg { transition: transform .25s cubic-bezier(.22,1,.36,1); }
.go:hover svg { transform: translateX(5px); }

/* ---------- Air zone (home page hero + rooms) ---------- */
#airZone { background: radial-gradient(120% 80% at 80% 0%, #24365f 0%, #131d38 45%, #0c1428 100%); }
#air { position: sticky; top: 0; display: block; width: 100%; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; z-index: 0; pointer-events: none; }
/* Before the 3D scene loads (or if it can't), a quiet CSS air pattern stands in */
#airZone:not(.air-on) #air { background:
  radial-gradient(60% 40% at 78% 55%, rgba(232,112,58,.20), transparent 70%),
  radial-gradient(50% 35% at 20% 60%, rgba(127,214,242,.12), transparent 70%); }

/* Rooms: stacked cards by default; the scroll-driven version switches on with .live */
.rooms-pin { display: grid; gap: 1.25rem; padding: 3rem 1.25rem 4rem; max-width: 80rem; margin: 0 auto; }
.thermo { display: none; }
.rooms.live { height: 260vh; }
.rooms.live .rooms-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: block; padding: 0; max-width: none; }
.rooms.live .room-card { position: absolute; left: max(1.25rem, calc((100vw - 80rem) / 2 + 2rem)); top: 50%; width: min(30rem, calc(100vw - 2.5rem)); opacity: 0; transform: translateY(calc(-50% + 30px)); pointer-events: none; will-change: opacity, transform; }
.rooms.live .room-card.on { pointer-events: auto; }
.rooms.live .thermo { display: block; position: absolute; right: max(1.25rem, calc((100vw - 80rem) / 2 + 2rem)); bottom: 5.75rem; text-align: right; }
.thermo-num { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 600; font-size: clamp(4.5rem, 11vw, 9.5rem); line-height: .85; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.room-dots { display: none; }
.rooms.live .room-dots { display: flex; position: absolute; left: max(1.25rem, calc((100vw - 80rem) / 2 + 2rem)); bottom: 2.75rem; gap: .5rem; }
.room-dots span { width: 2.25rem; height: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.room-dots i { display: block; height: 100%; width: 100%; background: #7FD6F2; transform: scaleX(0); transform-origin: left; }
@media (max-width: 767px) {
  .rooms.live .room-card { top: 5.25rem; transform: translateY(24px); }
  .rooms.live .thermo { bottom: 5.25rem; }
  .rooms.live .room-dots { bottom: 1.5rem; }
  .thermo-num { font-size: 4.25rem; }
}

/* ---------- Sub-page header: drifting air lines ---------- */
.air-lines path { fill: none; stroke: #7FD6F2; stroke-width: 1; stroke-linecap: round; stroke-dasharray: 90 520; animation: airDrift 9s linear infinite; opacity: .8; }
.air-lines path:nth-child(2n) { animation-duration: 12s; opacity: .5; stroke-dasharray: 140 620; }
.air-lines path:nth-child(3n) { animation-duration: 15s; opacity: .3; stroke: #fff; }
@keyframes airDrift { from { stroke-dashoffset: 610; } to { stroke-dashoffset: 0; } }

/* FAQ */
details.faq summary { list-style: none; cursor: pointer; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .plus { transition: transform .25s ease; }
details.faq[open] summary .plus { transform: rotate(45deg); }

@keyframes cueBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.scroll-cue-arrow { animation: cueBounce 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: rotate(var(--rot, 0deg)) !important; transition: none; }
  .air-lines path, .scroll-cue-arrow { animation: none; }
  .go svg { transition: none; }
}

/* Reveals slide in from the side; never let that widen the page on phones */
main { overflow-x: clip; }

/* ---------- Readability ----------
   Bright orange is too faint for small text on the light paper, so text-orange
   uses a deeper rust there. Dark (navy) areas keep a bright orange. */
html .text-orange { color: #B54C1B; }
html .bg-navy .text-orange, html .bg-navy2 .text-orange, html .bg-navy3 .text-orange,
html .room-card .text-orange, html #airZone .text-orange, html footer .text-orange { color: #F2854F; }
html .bg-navy .bg-white .text-orange, html .bg-navy .bg-paper .text-orange, html .bg-navy .bg-cream .text-orange { color: #B54C1B; }

/* Home hero + rooms: a soft shade behind the copy so the moving air never runs through the words */
.air-shade { position: sticky; top: 0; display: block; width: 100%; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(12,20,40,.92) 0%, rgba(12,20,40,.78) 34%, rgba(12,20,40,.25) 52%, rgba(12,20,40,0) 64%); }
@media (max-width: 767px) {
  .air-shade { background: linear-gradient(180deg, rgba(12,20,40,.9) 0%, rgba(12,20,40,.8) 55%, rgba(12,20,40,.2) 80%, rgba(12,20,40,0) 100%); }
}
/* Buttons: a deeper orange so the white labels are easy to read */
html .bg-orange { background-color: #C2511C; }
html .hover\:bg-orange2:hover { background-color: #A3441A; }
/* The thermostat readout sits over the 3D rooms; a soft shadow keeps it legible */
.thermo { text-shadow: 0 2px 16px rgba(12,20,40,.95), 0 0 4px rgba(12,20,40,.8); }
/* Keep the pinned 3D scene and its shade inside the hero + rooms area, so they never spill over the sections below */
#airZone { overflow: clip; }