/* =========================================================
   Hero Section — editorial / handmade art studio
   ========================================================= */

.hero {
  position: relative;
  padding-top: clamp(8rem, 14vw, 12rem);
  padding-bottom: clamp(5rem, 10vw, 9rem);
  overflow: hidden;
}

/* Brand sygnet watermark — large, centered, very subtle */
.hero__sygnet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(440px, 62vw, 860px);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation: sygnetIn 1800ms 200ms var(--ease-out) forwards;
}

@keyframes sygnetIn {
  to { opacity: 0.05; }
}

@media (max-width: 960px) {
  .hero__sygnet {
    width: clamp(280px, 65vw, 440px);
  }
}

/* Interactive brush trail canvas — sits above content, no pointer events */
.hero__trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .hero__trail { display: none; }
}

/* Animated outline looping around the H1 (position/size set in JS) */
.hero__outline {
  position: absolute;
  pointer-events: none;
  z-index: 30;
  overflow: visible;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.hero__outline.is-ready { opacity: 1; }

.hero__outline text {
  fill: none;
  stroke: var(--color-coral);
  opacity: 0.95;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "opsz" 96, "wdth" 100;
  paint-order: stroke;
}

@media (prefers-reduced-motion: reduce) {
  .hero__outline { display: none; }
}

/* Centered typography hero */
.hero__copy {
  position: relative;
  z-index: var(--z-content);
}

.hero__copy--centered {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}

.hero__title {
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: 0.88;
  letter-spacing: -0.055em;
  margin-top: var(--space-5);
  font-weight: 800;
  font-variation-settings: "opsz" 96, "wdth" 100;
}

.hero__title-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;   /* descenders/ascenders not clipped */
}
.hero__title-line span {
  display: inline-block;
  transform: translateY(110%);
  animation: heroLineUp 900ms var(--ease-out) forwards;
}
.hero__title-line:nth-child(1) span { animation-delay: 250ms; }
.hero__title-line:nth-child(2) span { animation-delay: 420ms; }
.hero__title-line:nth-child(3) span { animation-delay: 590ms; }

.hero__title-line--accent span {
  color: white;
  background-color: var(--color-coral);
  padding: 0.02em 0.16em 0.04em;
  border-radius: 0.1em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

@keyframes heroLineUp {
  to { transform: translateY(0); }
}

/* Squiggle under headline — draws in like ink */
.hero__title-mark {
  display: block;
  width: 0;
  height: 16px;
  margin: var(--space-4) auto 0;     /* centered */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16' preserveAspectRatio='none'><path d='M3 10 C 24 2, 50 14, 80 7, 110 1, 140 13, 157 7' stroke='%23FFC857' stroke-width='6' stroke-linecap='round' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-size: 160px 16px;
  background-position: center center;
  animation: heroSquiggle 800ms 1100ms var(--ease-out) forwards;
}

@keyframes heroSquiggle {
  to { width: 160px; }
}

.hero__sub {
  margin-top: var(--space-8);
  max-width: 32rem;
  margin-inline: auto;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.65;
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 700ms 1300ms var(--ease-out) forwards;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-9);
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 700ms 1500ms var(--ease-out) forwards;
}

.hero__copy > .eyebrow {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 700ms 100ms var(--ease-out) forwards;
}

@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Decorative SVG elements (bigger + going off-screen) --- */
.hero__decor {
  position: absolute;
  pointer-events: none;
  z-index: var(--z-decor);
  opacity: 0;
  translate: 0 24px;
  animation: decor-in 1.2s var(--ease-out) forwards;
}

/* LEFT EDGE — big coral brush stroke going off-screen */
.hero__decor--coral-left {
  width: clamp(220px, 22vw, 360px);
  top: 36%;
  left: -7%;
  transform: rotate(-14deg);
  animation-delay: 0.2s;
}

/* LEFT BOTTOM — mint brush stroke peeking from off-screen */
.hero__decor--mint-bottomleft {
  width: clamp(200px, 20vw, 320px);
  bottom: 6%;
  left: -10%;
  transform: rotate(-8deg);
  animation-delay: 0.5s;
  opacity: 0.95;
}

/* RIGHT EDGE — big mustard brush stroke going off-screen */
.hero__decor--mustard-right {
  width: clamp(220px, 22vw, 360px);
  bottom: 18%;
  right: -8%;
  transform: rotate(12deg);
  animation-delay: 0.4s;
}

/* TOP-LEFT dot cluster */
.hero__decor--dots-tl {
  width: 90px;
  top: 18%;
  left: 8%;
  animation-delay: 0.6s;
  transform: rotate(-15deg);
}

/* TOP-RIGHT dot cluster (mint colored via filter) */
.hero__decor--dots-tr {
  width: 80px;
  top: 8%;
  right: 4%;
  animation-delay: 0.7s;
  filter: hue-rotate(135deg) saturate(2);
  opacity: 0.6;
}

/* TOP-RIGHT area — hand-drawn scissors */
.hero__decor--scissors {
  width: clamp(54px, 5.5vw, 80px);
  top: 22%;
  right: 8%;
  animation: decor-in 1.2s var(--ease-out) 0.9s forwards,
             sway 8s ease-in-out infinite 2s;
}

/* BOTTOM-RIGHT — coral heart */
.hero__decor--heart {
  width: clamp(72px, 7vw, 100px);
  bottom: 14%;
  right: 10%;
  transform: rotate(-12deg);
  animation: decor-in 1.2s var(--ease-out) 1.1s forwards,
             floaty 5s ease-in-out infinite 2s;
}

@keyframes decor-in {
  to { opacity: 1; translate: 0 0; }
}

@keyframes sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(8deg); }
}

@keyframes floaty {
  0%, 100% { transform: rotate(-12deg) translateY(0); }
  50%      { transform: rotate(-8deg)  translateY(-6px); }
}

/* Lock the static rotation so decor-in keyframe doesn't override it */
.hero__decor--coral-left      { transform: rotate(-14deg); }
.hero__decor--mint-bottomleft { transform: rotate(-8deg); }
.hero__decor--mustard-right   { transform: rotate(12deg); }
.hero__decor--dots-tl         { transform: rotate(-15deg); }
.hero__decor--heart           { transform: rotate(-12deg); }

/* --- Responsive --- */
@media (max-width: 960px) {
  .hero__title                  { font-size: clamp(3.75rem, 18vw, 6.5rem); }
  .hero__sub                    { margin-top: var(--space-6); max-width: 30rem; }
  .hero__ctas                   { margin-top: var(--space-7); gap: var(--space-4); }
  .hero__decor--mint-bottomleft { width: 140px; bottom: 2%; }
  .hero__decor--mustard-right   { width: 140px; right: -7%; }
  .hero__decor--coral-left      { width: 140px; left: -7%; }
  .hero__decor--heart           { width: 56px; right: 6%; bottom: 8%; }
  .hero__decor--scissors        { width: 40px; right: 6%; top: 12%; }
}

@media (max-width: 540px) {
  .hero__title                  { font-size: clamp(4.75rem, 23vw, 7.5rem); letter-spacing: -0.05em; }
  .hero__sub                    { font-size: var(--text-sm); margin-top: var(--space-5); max-width: 26rem; }
  .hero__ctas                   { flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
  .hero__ctas .btn              { width: 100%; }
  .hero__title-mark             { width: 90px; height: 10px; margin-top: var(--space-3); }
  .hero__decor--scissors        { display: none; }
  .hero__decor--coral-left      { width: 90px;  left: -8%; top: 30%; }
  .hero__decor--mustard-right   { width: 90px;  right: -8%; bottom: 16%; }
  .hero__decor--mint-bottomleft { width: 90px;  bottom: 3%; left: -8%; }
  .hero__decor--heart           { width: 40px;  right: 4%; bottom: 6%; }
  .hero__sygnet                 { opacity: 0.04; width: 280px; }
  .eyebrow                      { font-size: 0.7rem; }
}