/* =====================================================================
   Sowur Shield · page styles
   Layout lives in the inline styles carried over from the original
   design, untouched. This file holds what the old runtime used to
   generate (base rules, hover/focus states, the stateful components)
   plus the new motion and the small-screen header.
   ===================================================================== */

.sowur {
  --night: #17130f;
  --deep: #0f0c09;
  --paper: #f3f2f2;
  --soft: #c8c0b4;
  --dim: #8e857a;
  --gold: #e8b04b;
  --cyan: #35b5d8;
  --magenta: #d6006c;
  --line: rgba(243, 242, 242, 0.13);
  --serif: 'Source Serif 4', Georgia, serif;
  --ui: 'Jost', 'Avenir Next', system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  background: var(--night);
  /* clip, not hidden: hidden turned this box into a scroll container and
     quietly broke the sticky header the design always meant to have */
  overflow-x: hidden;
  overflow-x: clip;
}

/* ---------- base (as in the original page) ---------- */
html.motion { scroll-behavior: smooth; }
body { margin: 0; background: #17130f; color: #f3f2f2; font-family: "Jost", "Avenir Next", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
img { display: block; max-width: 100%; }
a { color: #e8b04b; text-decoration: none; }
a:hover { color: #f3f2f2; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: pretty; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid #e8b04b; outline-offset: 3px; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 72px; }

@keyframes fly {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 0.8; }
  50%  { transform: translate(var(--drift), -120px); opacity: 0.5; }
  90%  { opacity: 0.8; }
  100% { transform: translate(0, 0); opacity: 0; }
}

@keyframes lampFlicker {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  20%      { opacity: 0.55; transform: scale(1.06); }
  45%      { opacity: 0.9;  transform: scale(0.96); }
  70%      { opacity: 0.6;  transform: scale(1.1); }
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* reduced motion (or no script): everything settles at once */
html:not(.motion) *,
html:not(.motion) *::before,
html:not(.motion) *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* Portuguese/Spanish visitors: keep the English copy out of sight for the
   instant it takes to swap it (the head script lifts this after 1.5s max) */
.i18n-pending [data-i18n] { visibility: hidden; }

/* ---------- hover and focus states the old runtime generated ---------- */
.skip:focus { left: 12px !important; top: 12px !important; }
.hv-gold:hover { color: var(--gold) !important; }
.hv-paper:hover { color: var(--paper) !important; }
.hv-btn:hover { background: #f3c974 !important; }
.hv-line:hover { border-color: var(--gold) !important; color: var(--gold) !important; }

/* ---------- ambient backdrop ---------- */
.amb-sky { background-image: url("img/bg-sky-night-1672.webp"); }
.amb-forest { background-image: url("img/bg-forest-fireflies-1536.webp"); }
.amb-farm { background-image: url("img/bg-farm-bonfire-1672.webp"); }

@media (max-width: 900px) {
  .amb-sky { background-image: url("img/bg-sky-night-960.webp"); }
  .amb-forest { background-image: url("img/bg-forest-fireflies-960.webp"); }
  .amb-farm { background-image: url("img/bg-farm-bonfire-960.webp"); }
}

/* the demo's cover art sits under a 72% shade, so the small version is
   plenty; the script only asks for it once the visitor gets close */
.demo-idle.is-near,
html:not(.js) .demo-idle { background-image: url("img/farm-800.webp"); }

.amb-flies > span {
  background: var(--fly, #b8f0b8);
  box-shadow: 0 0 8px 2px var(--fly-glow, rgba(184, 240, 184, 0.6));
  transition: background-color 1.4s ease, box-shadow 1.4s ease;
}

/* ---------- header: language switch ---------- */
.lang-btn {
  padding: 9px 11px;
  border: 0;
  background: transparent;
  color: #8e857a;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
}

.lang-btn[aria-pressed="true"] { background: rgba(232, 176, 75, 0.16); color: #e8b04b; }

.play-short { display: none; }

.top { transition: transform 0.35s var(--ease); }

/* phones: two tidy rows instead of three, and the bar tucks away while
   you read downwards, back as soon as you scroll up */
@media (max-width: 719px) {
  .top-in { row-gap: 10px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  .crumbs { letter-spacing: 0.1em !important; min-width: 0; }
  .crumb-mid { display: none; }
  .top-play { padding: 9px 16px !important; }
  .play-long { display: none; }
  .play-short { display: inline; }
  .sections {
    order: 5;
    flex: 1 1 60% !important;
    min-width: 0;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 18px !important;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  .sections::-webkit-scrollbar { display: none; }
  .sections a { white-space: nowrap; padding: 6px 0; }
  .langs { order: 6; }
  .top.is-tucked { transform: translateY(-100%); }
}

/* ---------- day loop tabs ---------- */
.loop-tab {
  position: relative;
  overflow: hidden;
  flex: 0 1 calc(33.333% - 7px);
  min-width: 132px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 16px 18px;
  border: 1px solid rgba(243, 242, 242, 0.13);
  background: rgba(15, 12, 9, 0.45);
  color: #c8c0b4;
  text-align: left;
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, color 220ms ease;
  transform: translateY(0);
}

.loop-tab[aria-selected="true"] {
  border-color: #e8b04b;
  background: rgba(232, 176, 75, 0.10);
  color: #e8b04b;
  transform: translateY(-3px);
}

.loop-tab:hover { transform: translateY(-3px) !important; }

/* the day ticks along on its own: the active tab fills like a clock */
.tab-timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #e8b04b;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.loop-wrap.is-playing .loop-tab[aria-selected="true"] .tab-timer { animation: tabtimer 6s linear forwards; }
/* hold the clock while someone is looking at a step */
.loop-wrap.is-playing:has(.loop-tabs:hover, .loop-panel:hover) .tab-timer,
.loop-wrap.is-playing .loop-tabs:focus-within .tab-timer { animation-play-state: paused; }

@keyframes tabtimer { to { transform: scaleX(1); } }

.loop-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms ease, transform 7s ease;
}

.loop-img.is-front { opacity: 0.72; }
.motion .loop-img.is-front { transform: scale(1.05); }

.loop-panel.is-changing .loop-copy > *,
.loop-panel.is-changing .loop-big { animation: swapIn 0.5s var(--ease) both; }
.loop-panel.is-changing .loop-body { animation-delay: 0.06s; }
.loop-panel.is-changing .loop-next { animation-delay: 0.12s; }

.loop-pause {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}

.loop-pause:hover { color: var(--gold); border-color: var(--gold); }

/* pause glyph (two bars), play glyph (triangle) when paused */
.loop-pause-icon { position: relative; width: 8px; height: 9px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.loop-pause[aria-pressed="true"] .loop-pause-icon { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; border-right: 0; }
html:not(.motion) .loop-pause { display: none; }

@keyframes swapIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- animals: care runs down the chain, link by link ---------- */
.motion .chain.is-live li { animation: chainPulse 5.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.7s); }

@keyframes chainPulse {
  0%, 14%, 100% { border-color: rgba(243, 242, 242, 0.13); color: #c8c0b4; }
  5%, 9% { border-color: rgba(232, 176, 75, 0.75); color: #e8b04b; }
}

/* ---------- places and map: images breathe a little ---------- */
.zoom img { transition: transform 900ms var(--ease); }
.zoom:hover img { transform: scale(1.04); }

.kb img { transform-origin: 62% 48%; }
.motion .kb.is-live img { animation: kenburns 26s ease-in-out infinite alternate; }

@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.07) translate(-1%, 1%); }
}

.hero-fig img { transition: transform 0.7s var(--ease); will-change: transform; }

/* ---------- the central choice ---------- */
.ws-btn {
  flex: 0 1 calc(20% - 1px);
  min-width: 124px;
  padding: 16px 12px;
  border: 0;
  background: transparent;
  color: #c8c0b4;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 250ms ease, background 250ms ease;
  box-shadow: none;
}

.ws-btn[aria-pressed="true"] {
  background: rgba(243, 242, 242, 0.07);
  color: var(--ta);
  box-shadow: inset 0 -2px 0 var(--a);
}

.ws-btn:hover { background: rgba(243, 242, 242, 0.05) !important; color: #f3f2f2 !important; }

.ws-text.is-changing > * { animation: swapIn 0.55s var(--ease) both; }
.ws-text.is-changing > :nth-child(2) { animation-delay: 0.05s; }
.ws-text.is-changing > :nth-child(3) { animation-delay: 0.1s; }
.ws-text.is-changing > :nth-child(4) { animation-delay: 0.15s; }

/* ---------- systems ---------- */
.sys-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid rgba(243, 242, 242, 0.13);
  border-radius: 999px;
  background: transparent;
  color: #c8c0b4;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, color 200ms ease;
  transform: translateY(0);
}

.sys-pill span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: 0.12em; opacity: 0.7; }
.sys-pill b { font-weight: inherit; }

.sys-pill[aria-pressed="true"] {
  border-color: #e8b04b;
  background: rgba(232, 176, 75, 0.10);
  color: #e8b04b;
  transform: translateY(-2px);
}

.sys-pill:hover { transform: translateY(-2px) !important; }

.sys-panel.is-changing > * { animation: swapIn 0.45s var(--ease) both; }
.sys-panel.is-changing > p { animation-delay: 0.05s; }

/* ---------- gallery: fills its rows at every width ---------- */
.g-grid { display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: 1fr; }

.g-tile {
  position: relative;
  padding: 0;
  border: 1px solid rgba(243, 242, 242, 0.13);
  background: #0b0907;
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}

.g-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms ease; }
.g-tile img:hover { transform: scale(1.03); }
.g-tile.is-wide,
.g-tile.is-span2 { aspect-ratio: 16 / 9; grid-column: 1 / -1; }

@media (min-width: 690px) {
  .g-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1050px) {
  .g-grid { grid-template-columns: repeat(3, 1fr); }
  /* the map shares its row with the battle, cropped to the row's height */
  .g-tile.is-span2 { grid-column: span 2; aspect-ratio: auto; }
  .g-tile.is-span2 img { position: absolute; inset: 0; }
}

html.lb-open { overflow: hidden; }
.lb-img { transition: opacity 0.3s ease; }
.lb-img.is-swapping { opacity: 0; }

/* ---------- the demo ---------- */
.demo-tip { transition: opacity 0.5s ease; }
.demo-tip.is-out { opacity: 0; }

/* ---------- footer wordmark: same sting as the studio site ---------- */
.wordmark .wm-s,
.wordmark .wm-o,
.wordmark .wm-l,
.wordmark .wm-v { transform-box: fill-box; transform-origin: 50% 100%; }
.wordmark .wm-rays path { stroke-dasharray: 1; }

/* ---------- scroll reveal ---------- */
.motion [data-reveal]:not(.is-in) { opacity: 0; }
.motion [data-reveal].is-in { animation: rise 0.9s var(--ease) var(--d, 0s) both; }

@keyframes rise {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: none; }
}