/* ==========================================================================
   Goretii Designs · Sample concepts · shared base
   Reset, accessibility helpers, reveal system, rotating word, demo form note,
   and the fixed "Sample concept" ribbon (Goretii brand colors, design-v2).
   Per-site look lives in each sample folder.
   ========================================================================== */

@font-face {
  font-family: "GD Jakarta";
  src: url("../../assets/fonts/plus-jakarta-sans-latin-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:where(section[id], footer[id], div[id]) { scroll-margin-top: 88px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Accessibility helpers ---------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; border-radius: 8px;
  background: #061327; color: #fff; font: 600 15px/1 "GD Jakarta", system-ui, sans-serif; text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; outline: 2px solid #93c5fd; outline-offset: 3px; }

/* ---------- Entrance animation (CSS only, plays without JS) ---------- */
@keyframes gd-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes gd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gd-zoom { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: gd-rise .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, 0ms); }
  .fade-in { animation: gd-fade 1.2s ease both; animation-delay: var(--d, 0ms); }
  .zoom-in { animation: gd-zoom 1.8s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, 0ms); }
}

/* ---------- Scroll reveals (only hidden when JS is running) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    transition: opacity .85s cubic-bezier(.16, 1, .3, 1), transform .95s cubic-bezier(.16, 1, .3, 1), clip-path 1.1s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 34px, 0); }
  .js [data-reveal="fade"]:not(.is-in) { transform: none; }
  .js [data-reveal="left"]:not(.is-in), .js [data-reveal="right"]:not(.is-in) { transform: translate3d(0, 34px, 0); }
  .js [data-reveal="scale"]:not(.is-in) { transform: scale(.94); }
  .js [data-reveal="clip"]:not(.is-in) { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
  .js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
  @media (min-width: 900px) {
    .js [data-reveal="left"]:not(.is-in) { transform: translate3d(-40px, 0, 0); }
    .js [data-reveal="right"]:not(.is-in) { transform: translate3d(40px, 0, 0); }
  }
  /* Screenshot / safety override */
  .reveal-all [data-reveal], .reveal-all [data-reveal]:not(.is-in) { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}

/* ---------- Rotating headline word ---------- */
.rotator { display: inline-grid; justify-items: start; vertical-align: top; }
.rotator > .rotator__word { grid-area: 1 / 1; white-space: nowrap; }
/* Transform + opacity only. No filter/blur: animated blur on large display text
   crashed WebKit (Safari) while scrolling on mobile widths. Hidden words also
   drop to visibility:hidden once faded so they don't keep a live layer. */
.rotator.is-live > .rotator__word:not(.is-active) { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .rotator.is-live > .rotator__word { transition: opacity .45s ease, transform .7s cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s; }
  .rotator.is-live > .rotator__word:not(.is-active) { transform: translate3d(0, .4em, 0); transition: opacity .45s ease, transform .7s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .7s; }
  .rotator.is-live > .rotator__word.is-leaving { transform: translate3d(0, -.4em, 0); }
}

/* ---------- Demo form note ---------- */
.demo-note { margin-top: 14px; font-size: 15px; line-height: 1.5; }
.demo-note:empty { display: none; }

/* ---------- Goretii ribbon (fixed, always visible) ---------- */
.gd-ribbon {
  position: fixed; z-index: 80; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #061327; color: #fff; text-decoration: none; text-align: center;
  font: 600 11.5px/1.35 "GD Jakarta", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .01em;
  box-shadow: 0 -1px 0 rgb(255 255 255 / .1), 0 -10px 30px -12px rgb(0 0 0 / .45);
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.gd-ribbon::before { /* gold hairline, the Goretii jewelry */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #fcd34d 30%, #fcd34d 70%, transparent); opacity: .7;
}
.gd-ribbon__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #fcd34d; box-shadow: 0 0 0 3px rgb(252 211 77 / .18); }
.gd-ribbon__brand { color: #93c5fd; }
.gd-ribbon:hover { background: #0a1c33; }
.gd-ribbon:hover .gd-ribbon__brand { text-decoration: underline; text-underline-offset: 3px; }
.gd-ribbon:focus-visible { outline: 2px solid #93c5fd; outline-offset: -4px; }

@media (min-width: 720px) {
  .gd-ribbon {
    left: 18px; right: auto; bottom: 18px; max-width: calc(100vw - 36px);
    padding: 9px 16px 9px 13px; border-radius: 999px; font-size: 12.5px; text-align: left;
    box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 14px 34px -14px rgb(0 0 0 / .7);
  }
  .gd-ribbon::before { left: 22px; right: 22px; }
  .gd-ribbon:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .gd-ribbon, .gd-ribbon:hover { transition: none; transform: none; }
}

/* Kai mobile fixes: footer nav links were 29-38px tall with 6-12px gaps on phones; give them a 44px tap height (touch/narrow only). */
@media (max-width: 959px) {
  .ftr .ftr__links a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
}