/* ==========================================================================
   ScaleSiam — home hero: the headline and the ribbon that weaves through it.
   hero-ribbon.js measures the rendered letters and draws the ribbon; this
   file owns the type, the layer order and the colours.
   ========================================================================== */

.ribbon-hero {
  --ribbon-deep: #0f3a2b;
  --ribbon-green: #1f6a4c;
  --ribbon-light: #5fb489;
  --ribbon-glint: #e6f9ee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 5.5vw, 72px);
  min-height: min(calc(100svh - var(--header-h)), 820px);
  padding-top: clamp(72px, 11vh, 128px);
  padding-bottom: clamp(56px, 9vh, 112px);
  overflow-x: clip;
}

/* Sized to the viewport, not the content column: the flame and the circuit
   reach almost to both edges of the page. The headline stays in English on
   the Thai page too, so this also outranks the Thai heading rules. */
.ribbon-hero .ribbon-title {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: 0;
  font-family: Anuphan, sans-serif;
  font-size: clamp(40px, 12.6vw, 320px);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.05em;
  text-align: center;
  color: var(--ink);
  animation: ribbon-rise 900ms var(--ease-out) both;
}

.ribbon-text,
.ribbon-glyphs,
.ribbon-line {
  display: block;
}

.ribbon-line {
  white-space: nowrap;
}

.ribbon-hero .actions {
  justify-content: center;
  animation: ribbon-rise 700ms var(--ease-out) 420ms both;
}

/* Layers, back to front: letters the ribbon crosses over, its shadow, the
   ribbon, letters it passes behind, then the flame. The real heading text
   stays underneath for layout, selection and assistive technology. */
.ribbon-title.is-woven .ribbon-text {
  color: transparent;
}

.ribbon-glyphs,
.ribbon-art,
.ribbon-crest {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.ribbon-glyphs {
  inset: 0;
}

.ribbon-glyphs-back { z-index: 1; }
.ribbon-glyphs-back .is-front { color: transparent; }
.ribbon-glyphs-front { z-index: 4; color: transparent; }
.ribbon-glyphs-front .is-front { color: var(--ink); }

.ribbon-baseline {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}

.ribbon-art {
  left: 0;
  top: 0;
  z-index: 3;
  overflow: visible;
}

.ribbon-art-shadow {
  z-index: 2;
  will-change: transform;
}

.ribbon-shadow { fill: #0c2233; opacity: 0.2; }
.ribbon-shade { fill: var(--ribbon-deep); opacity: 0.5; }
.ribbon-light { fill: var(--ribbon-light); opacity: 0.5; }
.ribbon-gloss { fill: var(--ribbon-glint); opacity: 0.5; }

.ribbon-trace,
.ribbon-pulse,
.ribbon-halo {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ribbon-trace { stroke: var(--ribbon-green); stroke-dasharray: 1 1; }
.ribbon-pulse { stroke: var(--ribbon-glint); }
.ribbon-via { fill: var(--ribbon-green); }
.ribbon-ring { fill: var(--paper); stroke: var(--ribbon-green); }
.ribbon-core { fill: var(--ribbon-light); }
.ribbon-halo { stroke: var(--ribbon-green); }

/* The kranok rises from the tail the ribbon leaves, then sways a little. */
.ribbon-crest {
  z-index: 5;
  opacity: 0;
  transform-origin: 96% 88.5%;
}

.ribbon-crest img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 96% 88.5%;
}

.ribbon-title.is-lit .ribbon-crest {
  animation: crest-rise 1100ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}

.ribbon-title.is-lit .ribbon-crest img {
  animation: crest-sway 7s ease-in-out 1.3s infinite;
}

@media (max-width: 560px) {
  .ribbon-hero {
    min-height: 0;
    padding-top: 88px;
    padding-bottom: 96px;
  }
}

@keyframes ribbon-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes crest-rise {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-16deg);
    clip-path: inset(100% -30% -10% -30%);
  }
  35% { opacity: 1; }
  100% {
    opacity: 1;
    transform: none;
    clip-path: inset(-30% -30% -10% -30%);
  }
}

@keyframes crest-sway {
  0%, 100% { transform: rotate(0deg); }
  32% { transform: rotate(1.6deg); }
  68% { transform: rotate(-1.1deg); }
}

@keyframes ribbon-fade {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon-hero .ribbon-title,
  .ribbon-hero .actions {
    animation-name: ribbon-fade;
  }

  .ribbon-title.is-lit .ribbon-crest {
    opacity: 1;
    animation: none;
  }

  .ribbon-title.is-lit .ribbon-crest img {
    animation: none;
  }
}