/* Homepage: the living painting, its five numbered doorways, the plaque that keys them, and the notes. */

.home { background: #2B1D09; overflow-x: hidden; }
.home main { position: relative; }

/* header floats over the painting */
.home-header {
  position: absolute; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 12px clamp(14px, 3vw, 32px) 28px; color: var(--ivory); pointer-events: none;
  background: linear-gradient(to bottom, rgba(18, 28, 46, .5), rgba(18, 28, 46, 0));
}
.home-header > * { pointer-events: auto; }
.home-mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 1.2rem; text-shadow: 0 1px 10px rgba(10, 14, 24, .55); }
.home-mark svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 4px rgba(10, 14, 24, .5)); }
.pill-btn {
  min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(255, 248, 232, .45);
  background: rgba(19, 34, 59, .62); color: var(--ivory); font-weight: 700; font-size: var(--t-sm); white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color var(--t-fast), border-color var(--t-fast);
}
.pill-btn:hover { background: rgba(19, 34, 59, .85); border-color: var(--sun); }
.home .icon-btn { background: rgba(19, 34, 59, .62); border-color: rgba(255, 248, 232, .45); color: var(--ivory); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.home .icon-btn:hover { background: rgba(19, 34, 59, .85); border-color: var(--sun); }
.home-header :focus-visible { outline-color: var(--sun); }

/* ---------------------------------------------------------------- the stage */
.stage {
  position: relative; width: 100%; height: 100svh; min-height: 420px; overflow: hidden; isolation: isolate;
  background: #6B4A12;
}
.stage-still { position: absolute; inset: 0; }
.stage-still img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform-origin: 0 0; }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 700ms var(--ease-out); }
.is-living .stage-canvas { opacity: 1; }
/* a soft vignette settles the painting's edges under the header and plaque */
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 95% at 55% 42%, rgba(43, 29, 9, 0) 58%, rgba(43, 29, 9, .32) 100%);
}

/* ---------------------------------------------------------------- doorways and their numbers
   The doorway is an invisible circle over its flower; the number on the rim is the visible key.
   The shader (or CSS, without WebGL) answers on the flower itself. Nothing follows the pointer. */
.doors { position: absolute; inset: 0; z-index: 2; }
.door { position: absolute; display: block; border-radius: 50%; opacity: 0; color: var(--ivory); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.door[data-ready] { opacity: 1; transition: opacity 500ms var(--ease-out); }
.door:focus-visible { outline: 3px solid var(--sun); outline-offset: 6px; box-shadow: 0 0 0 9px rgba(19, 34, 59, .5); }

.door-name {
  position: absolute; left: 50%; top: var(--below, 100%); transform: translate(-50%, 4px); pointer-events: none;
  padding: 5px 13px; border-radius: 999px; white-space: nowrap;
  background: var(--midnight); color: var(--ivory); font: 700 13px/1.3 var(--f-text);
  box-shadow: 0 0 0 1.5px var(--sun), 0 10px 22px -10px rgba(10, 14, 24, .8);
  opacity: 0; transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
.door.is-lit .door-name, .door:focus-visible .door-name { opacity: 1; transform: translate(-50%, 0); }

/* without WebGL the flower answers with a painted halo instead of the shader */
.is-still .door::after, .home:not(.is-living) .door::after {
  content: ""; position: absolute; inset: -6%; border-radius: 50%; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255, 236, 160, .85), 0 0 40px 12px rgba(255, 214, 90, .5);
  background: radial-gradient(circle, rgba(255, 230, 140, .32), rgba(255, 230, 140, 0) 62%);
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); transform: scale(.94);
}
.is-still .door.is-lit::after, .home:not(.is-living) .door.is-lit::after { opacity: 1; transform: none; }
/* until the visitor finds a doorway, the halos breathe softly */
.is-still:not(.is-engaged) .door::after { animation: door-breathe 8s ease-in-out infinite; }
.is-still:not(.is-engaged) .door:nth-child(2)::after { animation-delay: .4s; }
.is-still:not(.is-engaged) .door:nth-child(3)::after { animation-delay: .8s; }
.is-still:not(.is-engaged) .door:nth-child(4)::after { animation-delay: 1.2s; }
.is-still:not(.is-engaged) .door:nth-child(5)::after { animation-delay: 1.6s; }
.is-still:not(.is-engaged) .door:nth-child(6)::after { animation-delay: 2s; }
@keyframes door-breathe { 0%, 70%, 100% { opacity: 0; transform: scale(.94); } 82% { opacity: .5; transform: none; } }

/* ---------------------------------------------------------------- the plaque (the painting's key) */
.plaque {
  position: absolute; z-index: 10; left: clamp(14px, 2.4vw, 36px); bottom: clamp(14px, 3.2vh, 36px);
  width: min(348px, 31vw); padding: 20px 20px 14px;
  background: rgba(19, 34, 59, .9); color: var(--ivory);
  border-top: 3px solid var(--sun); border-radius: 3px 3px 12px 12px;
  box-shadow: 0 30px 60px -26px rgba(10, 14, 24, .8), inset 0 0 0 1px rgba(255, 248, 232, .06);
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
}
.plaque-title {
  font-family: var(--f-display); font-style: italic; font-weight: 600; font-variation-settings: "opsz" 72;
  font-size: clamp(1.7rem, 1.1rem + 1.2vw, 2.15rem); line-height: 1.02; letter-spacing: -0.01em; color: var(--ivory);
}
.plaque-sub { margin-top: 8px; font-size: var(--t-sm); line-height: 1.45; color: var(--on-night-2); }
.plaque-rooms { margin: 14px -10px 0; display: grid; gap: 2px; }
.room-entry {
  display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 12px;
  padding: 6px 10px; border-radius: 8px; color: inherit; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out);
}
.room-flower {
  width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(232, 185, 35, .55);
  transition: box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.room-text { display: grid; min-width: 0; }
.room-name { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 1.08rem; line-height: 1.2; color: var(--ivory); }
.room-chapter { margin-top: 1px; font-size: 0.7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #E8C25A; }
.room-blurb { display: none; }
.room-go { width: 16px; height: 16px; color: var(--sun); opacity: 0; transform: translateX(-4px); transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out); }
.room-entry:hover, .room-entry.is-lit { background: rgba(232, 185, 35, .13); }
.room-entry:hover .room-flower, .room-entry.is-lit .room-flower { box-shadow: 0 0 0 2px var(--sun); transform: scale(1.08); }
.room-entry:hover .room-go, .room-entry.is-lit .room-go, .room-entry:focus-visible .room-go { opacity: 1; transform: none; }
.plaque :focus-visible { outline-color: var(--sun); }
.plaque-caption {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 248, 232, .14);
  min-height: calc(2 * 1.45em + 10px); font-size: var(--t-sm); line-height: 1.45; color: var(--on-night-3);
}
.plaque-caption.is-room { color: var(--ivory); }

.home--cover:not(.label-below) .home-mark { visibility: hidden; }
@media (max-height: 800px) {
  .home--cover:not(.label-below) .room-entry { padding-block: 4px; }
  .home--cover:not(.label-below) .plaque-rooms { margin-top: 10px; }
}
@media (max-height: 760px) {
  .home--cover:not(.label-below) .plaque-sub { display: none; }
}

/* ---------------------------------------------------------------- phones and portrait screens
   The painting becomes a band with numbers only; the plaque sits below it as a full list. */
.home--band .home-header { position: relative; background: var(--midnight); padding-bottom: 12px; }
.home--band .home-mark span { display: inline; font-size: 1.05rem; }
.home--band .stage { height: auto; min-height: 0; }
.home--band .door-name { display: none; }   /* on phones the list below names them */
.label-below main { background: var(--midnight-2); }
.label-below .plaque {
  position: relative; left: auto; bottom: auto; width: auto; max-width: 720px; margin: 0 auto;
  border-radius: 0; border-top: 0; box-shadow: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: var(--s-6) clamp(18px, 5vw, 40px) var(--s-8);
}
.label-below .plaque-title { font-size: clamp(2.1rem, 9vw, 3rem); }
.label-below .plaque-rooms { gap: 6px; }
.label-below .room-entry { align-items: start; padding: 10px; }
.label-below .room-flower { margin-top: 2px; }
.label-below .room-go { margin-top: 6px; opacity: .8; transform: none; }
.label-below .room-name { font-size: 1.2rem; }
.label-below .room-blurb { display: block; margin-top: 4px; font-size: var(--t-sm); line-height: 1.45; color: var(--on-night-2); }
.label-below .plaque-caption { display: none; }

/* ---------------------------------------------------------------- notes: why sunflowers */
.why {
  width: min(720px, calc(100vw - 24px)); max-height: min(90svh, 920px); padding: 30px clamp(20px, 4vw, 44px) 30px; border: 0; border-radius: 18px;
  background: var(--ivory); color: var(--midnight); box-shadow: 0 40px 80px -20px rgba(10, 14, 24, .6);
}
.why::backdrop { background: rgba(18, 28, 46, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.why-close-form { position: sticky; top: 0; float: right; margin: -10px -14px 0 8px; z-index: 1; }
.why .why-close { background: var(--ivory); color: var(--midnight); border-color: var(--rule-strong); -webkit-backdrop-filter: none; backdrop-filter: none; }
.why .why-close:hover { border-color: var(--midnight); background: #F6E7C1; }
.why .why-close:focus-visible { outline-color: var(--midnight); }
.why-kicker { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--link); }
.why-title { margin-top: 4px; font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); line-height: 1.05; letter-spacing: -0.01em; }
.why-intro { margin-top: var(--s-3); color: var(--ink-2); max-width: 60ch; }
.why-list { margin-top: var(--s-5); display: grid; gap: 0; border-top: 1px solid var(--rule); }
.why-item { display: grid; grid-template-columns: 80px 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.why-item img { width: 80px; height: 80px; border-radius: 50%; }
.why-item h3 { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 1.3rem; line-height: 1.2; }
.why-item p { margin-top: 4px; font-size: 0.97rem; color: var(--ink-2); }
.why-room {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 5px 12px 5px 14px; border-radius: 999px;
  background: #F6E7C1; color: var(--midnight); font-size: var(--t-sm); font-weight: 700; text-decoration: none;
  transition: background-color var(--t-fast);
}
.why-room svg { width: 14px; height: 14px; }
.why-room:hover { background: #EFD99A; }
.why-note { margin-top: var(--s-5); padding: var(--s-4); background: #F6E7C1; border-radius: 12px; font-size: var(--t-sm); }
.why-sources { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--ink-3); }
.why-sources summary { cursor: pointer; font-weight: 700; color: var(--link); font-size: var(--t-sm); }
.why-sources ol { margin-top: var(--s-2); padding-left: 1.2em; display: grid; gap: 4px; }
@media (max-width: 520px) {
  .why-item { grid-template-columns: 56px 1fr; gap: var(--s-3); }
  .why-item img { width: 56px; height: 56px; }
}

.diag { position: fixed; right: 8px; bottom: 8px; z-index: 99; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .7); color: #fff; font: 12px/1.3 var(--f-mono); }

@media (max-width: 760px) { .home-mark span { display: none; } }
@media (max-width: 440px) { .home--band .home-mark span { display: none; } .pill-btn { padding: 8px 13px; } }
@media (prefers-reduced-motion: reduce) {
  .stage-canvas, .door-name, .room-flower, .room-go { transition: none; }
}