/* Persistent artwork. The page stays above it and scrolls normally. */
body.has-scene { background: #25291f; }
.opening {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  isolation: isolate;
  contain: layout paint;
  color: #f7f7f0;
  background: #25291f;
}
.site-shell { position: relative; z-index: 1; }
.has-scene .header { background: #25291fe8; color: #f7f7f0; border-bottom-color: #f7f7f017; }
.has-scene .header .brand-star { color: #e5fa64; }
.has-scene .header .nav-cta { background: #e5fa64; color: #25291f; }
.has-scene .header nav a::after { background: #e5fa64; }
.has-scene .menu-toggle span { background: #f7f7f0; }
.scene-stage { min-height: calc(100svh - 96px); display: flex; align-items: flex-end; padding: 40px max(4vw, 25px) 45px; color: #f7f7f0; }
.scene-stage-content { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.scene-stage .eyebrow { font-size: 8px; letter-spacing: 1.4px; color: #aeb79e; }
.scene-stage-description { margin-top: 10px; font-size: 17px; }
.scene-stage-description em { color: #e5fa64; font-family: Georgia, serif; }
.scene-stage-actions { display: flex; align-items: center; gap: 25px; }
.scene-stage-actions .button { font-size: 11px; padding: 17px 20px; }
.scene-scroll { display: inline-flex; align-items: center; gap: 20px; font-size: 11px; border-bottom: 1px solid #73815e; padding: 7px 0; }
.scene-scroll > span { font-size: 20px; color: #e5fa64; }
.site-content { position: relative; width: calc(100% - 40px); max-width: 1600px; margin: 0 auto 40px; border: 1px solid #f7f7f025; border-radius: 16px; overflow: clip; background: var(--paper); }
.opening-coordinate { position: absolute; top: 50%; left: 2vw; writing-mode: vertical-rl; transform: rotate(180deg) translateY(50%); font: 8px/1 'DM Sans', sans-serif; letter-spacing: 2px; color: #84906f; }
.opening-orbit { position: absolute; width: 78vw; height: 78vw; left: 44%; top: 50%; border-radius: 50%; border: 1px solid #e5fa6424; transform: translateY(-50%); box-shadow: 0 0 0 7vw #e5fa6405, 0 0 0 14vw #e5fa6404; }
.opening-orbit::before, .opening-orbit::after { content: ''; position: absolute; width: 16px; height: 1px; background: #d5e0b2; left: 14%; top: 14%; }
.opening-orbit::after { transform: rotate(90deg); }
.opening-asterisk { position: absolute; left: 21%; top: 50%; width: min(66vw, 85vh); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(135deg) scale(.19); perspective: 900px; z-index: 1; }
.opening-asterisk > span { position: absolute; inset: 0; transform: rotate(var(--turn)); }
.opening-asterisk > span > i { position: absolute; left: 50%; top: 44.5%; width: 49%; height: 11%; border-radius: 4px 35% 35% 4px; background: linear-gradient(180deg, #f5ffb1 0%, #e5fa64 20%, #b8d03d 100%); box-shadow: inset 0 1px 0 #ffffdf, 0 8px 0 #778d2b, 0 20px 25px #11190d38; transform-origin: 0 50%; transform: perspective(600px) translateX(0) rotateY(0) scaleX(1); opacity: 1; }
.opening-copy { position: absolute; left: 7vw; top: 48%; transform: translateY(-50%) rotate(-4deg); z-index: 3; opacity: 0; }
.opening-line { overflow: hidden; padding: .075em .09em .12em .025em; margin: -.12em 0; }
.opening-line > span { display: block; font: 700 clamp(64px, 11.9vw, 210px)/.93 Manrope, sans-serif; letter-spacing: -.075em; transform-origin: left bottom; }
.opening-line:first-child > span { color: #25291f; -webkit-text-stroke: 1.2px #f7f7f0; }
.opening-line-you > span { font: italic 400 clamp(110px, 21vw, 340px)/.88 Georgia, serif; letter-spacing: -.065em; color: #e5fa64; }
.opening-samples { position: absolute; inset: 0; z-index: 2; }
.opening-sample { position: absolute; width: clamp(95px, 12vw, 190px); background: #f1f0e3; color: #38432a; padding: 5px 5px 0; box-shadow: 0 18px 30px #0b130d59; opacity: 0; }
.opening-sample img { height: 13vw; max-height: 180px; min-height: 95px; object-fit: cover; filter: saturate(.7); }
.opening-sample > span { display: block; padding: 9px 4px; font: 6px/1.3 'DM Sans', sans-serif; letter-spacing: .65px; white-space: nowrap; }
.sample-coffee { top: 14%; left: 62%; --card-turn: -18deg; --card-flight: -180px; --card-delay: .37s; }
.sample-interior { top: 47%; left: 87%; --card-turn: 14deg; --card-flight: 180px; --card-delay: .57s; }
.sample-leaf { top: 69%; left: 66%; --card-turn: -9deg; --card-flight: 150px; --card-delay: .77s; }
.opening-signature { position: absolute; top: 50%; left: 31%; transform: translateY(-50%); z-index: 4; }
.opening-word { display: flex; font: 700 clamp(60px, 16.5vw, 280px)/1.15 Manrope, sans-serif; letter-spacing: -.08em; }
.opening-word > span { display: inline-block; transform-origin: 50% 100%; }
.opening-signature > p { font-size: clamp(12px, 1.4vw, 22px); letter-spacing: 0; margin: 14px 0 0 1vw; color: #c0c7b4; }
.opening-signature em { font-family: Georgia, serif; color: #e5fa64; }
.replay-opening { background: none; padding: 5px 0; font-size: inherit; color: inherit; }
.replay-opening > span { margin-left: 4px; }
.replay-opening[hidden] { display: none; }
.replay-opening:disabled { opacity: .6; cursor: default; }
.footer-bottom > div { flex-wrap: wrap; }

/* Unfold, assemble, then hold this composition indefinitely. */
html.scene-playing .opening-asterisk { animation: opening-sculpture 2.65s cubic-bezier(.4,0,.2,1) both; }
html.scene-playing .opening-asterisk > span > i { animation: opening-unfold 1s cubic-bezier(.16,1,.3,1) calc(.10s + var(--arm) * .065s) both; }
html.scene-playing .opening-copy { opacity: 1; animation: opening-copy-away .5s cubic-bezier(.6,0,.4,1) 1.75s forwards; }
html.scene-playing .opening-line > span { animation: opening-type-in .85s cubic-bezier(.16,1,.3,1) .10s both; }
html.scene-playing .opening-line:nth-child(2) > span { animation-delay: .24s; }
html.scene-playing .opening-line:nth-child(3) > span { animation-delay: .38s; }
html.scene-playing .opening-sample { animation: opening-card-in .8s cubic-bezier(.16,1,.3,1) var(--card-delay) both, opening-card-away .65s cubic-bezier(.6,0,.4,1) 1.8s forwards; }
html.scene-playing .opening-word > span { animation: opening-letter-in .62s cubic-bezier(.16,1,.3,1) calc(1.95s + var(--letter) * .035s) both; }
html.scene-playing .opening-signature > p { animation: opening-caption .55s ease 2.35s both; }
@keyframes opening-unfold { from { opacity: 0; transform: perspective(600px) translateX(35%) rotateY(85deg) scaleX(.15); } to { opacity: 1; transform: perspective(600px) translateX(0) rotateY(0) scaleX(1); } }
@keyframes opening-sculpture {
  0% { left: 83%; transform: translate(-50%,-50%) rotate(-48deg) scale(.72); }
  60% { left: 83%; transform: translate(-50%,-50%) rotate(26deg) scale(1); }
  100% { left: 21%; transform: translate(-50%,-50%) rotate(135deg) scale(.19); }
}
@keyframes opening-type-in { from { opacity: 0; transform: translateY(135%) rotate(9deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes opening-copy-away { to { opacity: 0; transform: translate(-6vw,-65%) rotate(-13deg) scale(.93); } }
@keyframes opening-card-in { from { opacity: 0; transform: translateY(70px) rotate(0deg) scale(.4); } to { opacity: 1; transform: translateY(0) rotate(var(--card-turn)) scale(1); } }
@keyframes opening-card-away { to { opacity: 0; transform: translateY(var(--card-flight)) rotate(calc(var(--card-turn) * 2)) scale(.7); } }
@keyframes opening-letter-in { from { opacity: 0; transform: translateY(110%) rotate(14deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes opening-caption { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width:1800px) { .opening-asterisk { width: min(66vw, 1000px); } }
@media (max-width:950px) {
  .scene-stage { min-height: calc(100svh - 82px); }
  .scene-stage-content { gap: 20px; }
  .scene-stage-actions { gap: 18px; }
  .scene-stage-description { font-size: 14px; }
}
@media (max-width:720px) {
  .has-scene .header nav { background: #25291f; color: #f7f7f0; border-bottom-color: #f7f7f020; }
  .scene-stage { min-height: calc(100svh - 74px); padding: 25px 6vw 32px; }
  .scene-stage-content { flex-direction: column; align-items: flex-start; gap: 22px; }
  .scene-stage .eyebrow { font-size: 7px; letter-spacing: 1px; }
  .scene-stage-description { font-size: 16px; }
  .scene-stage-actions { gap: 20px; flex-wrap: wrap; }
  .scene-stage-actions .button { font-size: 10px; padding: 16px; gap: 15px; }
  .scene-scroll { font-size: 10px; gap: 12px; }
  .site-content { width: calc(100% - 20px); margin-bottom: 20px; border-radius: 11px; }
  .opening-coordinate { display: none; }
  .opening-orbit { width: 115vw; height: 115vw; left: 20%; top: 27%; }
  .opening-asterisk { width: 85vw; left: 17%; top: 43%; transform: translate(-50%,-50%) rotate(135deg) scale(.23); }
  .opening-asterisk > span > i { box-shadow: inset 0 1px 0 #ffffdf, 0 5px 0 #778d2b, 0 12px 20px #11190d38; }
  .opening-copy { left: 6vw; top: 53%; }
  .opening-line > span { font-size: 18vw; }
  .opening-line:nth-child(2) > span { font-size: 23vw; }
  .opening-line-you > span { font-size: 34vw; }
  .opening-sample { width: 23vw; min-width: 80px; }
  .opening-sample img { height: 22vw; min-height: 75px; }
  .opening-sample > span { padding: 7px 2px; font-size: 4px; letter-spacing: .25px; }
  .sample-coffee { top: 14%; left: 10%; }
  .sample-interior { top: 18%; left: 87%; }
  .sample-leaf { top: 62%; left: 77%; }
  .opening-signature { top: 43%; left: 31%; }
  .opening-word { font-size: 20vw; }
  .opening-signature > p { font-size: 10px; margin-top: 14px; line-height: 1.7; }
  html.scene-playing .opening-asterisk { animation-name: opening-sculpture-mobile; }
  @keyframes opening-sculpture-mobile {
    0% { left: 78%; top: 29%; transform: translate(-50%,-50%) rotate(-48deg) scale(.72); }
    60% { left: 78%; top: 29%; transform: translate(-50%,-50%) rotate(26deg) scale(1); }
    100% { left: 17%; top: 43%; transform: translate(-50%,-50%) rotate(135deg) scale(.23); }
  }
}
@media (max-height:500px) {
  .scene-stage { min-height: max(450px, calc(100svh - 82px)); }
  .opening-copy { top: 43%; }
  .opening-line > span { font-size: 17vh; }
  .opening-line-you > span { font-size: 28vh; }
  .opening-sample img { height: 13vh; min-height: 0; }
  .opening-sample > span { padding: 5px; }
}
@media (prefers-reduced-motion:reduce) {
  html.scene-playing .opening * { animation: none !important; }
  html.scene-playing .opening-copy { opacity: 0; }
}
@media (min-width:721px) and (max-width:950px) {
  .site-content .hero h1 { font-size: clamp(39px, 5.4vw, 48px); }
}
@media (max-width:720px) {
  .site-content .section-wrap { width: calc(100% - 32px); }
}
@media (max-width:370px) {
  .site-content .hero h1 { font-size: clamp(36px, 11.2vw, 40px); }
  .site-content .contact-copy h2 { font-size: clamp(40px, 12.5vw, 46px); }
}
@media (max-width:720px) and (max-height:650px) {
  .opening-copy { top: 44%; }
}