/* Olgun Kaşıkçı, homepage sections. Built on system.css: colours, type sizes,
   corners and shadows come from its tokens. */

/* ------------------------------------------------------------------ lego -- */
/* Editorial split, 55/45. The type column and the drawing share one frame: the
   description hangs from the same line as the header's bottom and the header's role
   line ends where the drawing begins. The drawing covers its column (cropping a
   little of its top on wide, short screens) so the split line never moves. */
.lego { position: relative; height: 210svh; background: var(--offwhite); color: var(--black); }
.lego__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.lego__col { position: absolute; top: 0; right: 0; width: var(--split); height: 100%; overflow: hidden; background: var(--true-black); }
.lego__art {
  /* 1.2% over the column, so the file's own hairline edges are cropped away */
  --aw: max(calc(var(--split) * 1.012), calc(100svh * 0.7207 * 1.012));
  position: absolute; width: var(--aw); aspect-ratio: 1462.68 / 2029.61;
  left: calc((var(--split) - var(--aw)) / 2);
  top: calc((100svh - var(--aw) / 0.7207) * 0.4);
  background: var(--true-black);
}
.lego__fig { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; visibility: hidden; }
.lego__fig.is-on { visibility: visible; }
.lego__bricks { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 2; }
.lego__copy {
  position: absolute; z-index: 3; pointer-events: none;
  top: clamp(112px, 17svh, 168px); bottom: var(--gut); left: var(--gut);
  right: calc(var(--split) + var(--gut));   /* same right edge as the header's role line */
  display: flex; flex-direction: column;
}
.lego__title { flex: 1; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-display); }
.lego__say {
  font-weight: 600;
  font-size: var(--fs-lead); line-height: 1.06; letter-spacing: -0.034em;
  max-width: 15.5ch; text-wrap: balance;
}
/* Helper lines: small, quiet, set on the type column's edges. */
.lego__hints {   /* .type-hint */
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: clamp(14px, 2.2svh, 22px); padding-top: 10px;
}
.lego__play--touch { display: none; }
@media (hover: none) { .lego__play--pointer { display: none; } .lego__play--touch { display: inline; } }

/* ----------------------------------------------------------------- index -- */
.hero__stage {
  --flood: var(--true-black); --ink: var(--white);
  position: relative; min-height: 100svh;
  background: var(--flood); color: var(--ink);
  transition: background-color 280ms var(--ease), color 280ms var(--ease);
  display: grid; grid-template-rows: 1fr auto;
  padding: 84px var(--gut) 20px;
}
.hero__index { position: relative; align-self: center; justify-self: center; }
.hero__covers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.index { text-align: center; }
.index li { position: relative; z-index: 1; }
.index li.is-on { z-index: 3; }
.index a {
  display: inline-block; text-decoration: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-index);
  line-height: 1.04; letter-spacing: -0.035em;
  padding: 0 0.16em;
  opacity: 0.8;
  transition: opacity 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease);
}
.index li.is-on a { opacity: 1; background: var(--pale); color: var(--black); }
.hero__cover {
  position: absolute; left: 50%; top: 50%;
  width: clamp(160px, 19vw, 290px);
  translate: -50% -50%;
  rotate: var(--tilt, 0deg);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 420ms var(--ease);
}
.hero__cover.is-on { clip-path: inset(0 0 0 0); }
.hero__cover img { width: 100%; height: auto; }

.hero__foot { display: flex; justify-content: flex-end; align-items: end; gap: 16px; }
.hero__foot .cta { --cta-hover: var(--sun); }

/* ------------------------------------------------------------------ drop -- */
/* Selected Work intro: the stage holds while the hand lowers in. */
.drop { position: relative; height: 190vh; background: var(--offwhite); color: var(--black); }
.drop__stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut);
  padding: 0 var(--gut) clamp(32px, 6vh, 64px);
  align-items: end;
}
.drop__hand {
  position: absolute; top: 0; right: -3vw;
  width: clamp(300px, 50vw, 760px); max-width: none;
  transform-origin: 70% 0%;
  transform: translateY(-100%);   /* hidden until the scene scrolls in */
  /* On the off-white ground the white hand needs a cut-paper shadow to read;
     the tight layer also keeps the pale string visible. */
  filter: var(--shadow-cutout);
  will-change: transform;
}
.drop__copy { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; position: relative; }
.drop__title {
  grid-column: 1 / span 8;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-mega); line-height: var(--lh-mega); letter-spacing: var(--tr-mega);
}
.drop__lede { grid-column: 9 / -1; max-width: 34ch; padding-bottom: 0.6em; font-size: var(--fs-m); }

/* ------------------------------------------------------------------ rack -- */
/* Selected Work: prints on white mats stand in a row that runs back into the
   room, like a print rack in a gallery store. Scroll walks along the row; the
   front print's museum label sits bottom right. */
.rack { position: relative; height: 520svh; background: var(--offwhite); color: var(--black); }
.rack__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.rack__room {
  position: absolute; inset: 0; perspective: 2000px; perspective-origin: 38% 40%;
}
.rack__row {
  position: absolute; left: 25%; top: 76%; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(-46deg);
}
.print {
  --w: clamp(220px, 25vw, 420px);
  position: absolute; left: 0; top: 0; width: var(--w);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.print a { display: block; color: inherit; text-decoration: none; }
.print__mat {
  display: block; background: var(--white); padding: 4.5%;
  box-shadow: var(--shadow-print);
  transition: box-shadow 300ms var(--ease);
}
.print__mat img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--g); }
.print__cap { display: none; }
@media (hover: hover) and (pointer: fine) {
  .print a:hover .print__mat { box-shadow: var(--shadow-print-lift); }
}
.print a:focus-visible { outline: 2px solid var(--black); outline-offset: 6px; box-shadow: none; }
/* .label (system.css), placed bottom right */
.rack__label { position: absolute; right: var(--gut); bottom: clamp(24px, 5svh, 48px); width: min(22rem, 70vw); }
/* .link, placed bottom left */
.rack__more { position: absolute; left: var(--gut); bottom: clamp(24px, 5svh, 48px); color: var(--black); }

/* -------------------------------------------------------------- statement -- */
.say__stage { background: var(--cobalt); color: var(--pale); display: flex; align-items: center; padding: 0 var(--gut); }
.say__text {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-statement); line-height: 1.06; letter-spacing: -0.04em;
  max-width: 21ch; text-wrap: balance;
}
.say__text .nw { white-space: nowrap; }
/* All three objects share one height, set by the type: from just under the baseline
   to the top of the ascenders, so each reads as a word in the line. */
.chip {
  display: inline-block; height: 0.84em; vertical-align: -0.07em;
  margin: 0 0.1em 0 0.14em;
}
.chip img { display: block; height: 100%; width: auto; max-width: none; }

/* ----------------------------------------------------------- what I make -- */
/* Paper section, stacked sticky cards.
   Each card holds one large cover; while the card is on top, scroll pans its
   track sideways to the other two pieces before the next card arrives. */
.make { --budget: 90svh; --card-h: min(76svh, 680px); --top: 84px;
  background: var(--paper); color: var(--black); padding: clamp(80px, 14vh, 160px) var(--gut) var(--gut); }
.make__head {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut);
  align-items: end; margin-bottom: clamp(40px, 8vh, 88px);
}
.make__head h2 {
  grid-column: 1 / span 7;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-section); line-height: 0.9; letter-spacing: -0.05em;
}
.make__head p { grid-column: 9 / -1; max-width: 30ch; }
.make__stack { display: grid; }
.card {
  position: sticky; top: calc(var(--top) + var(--i, 0) * 22px);
  height: var(--card-h);
  display: grid; grid-template-columns: 5fr 7fr; gap: var(--gut);
  padding: clamp(24px, 3.4vw, 48px) 0 clamp(24px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px);
  margin-bottom: calc(var(--budget) + 100svh - var(--card-h) - var(--top) + 2svh);
  background: var(--c); color: var(--k);
  border-radius: var(--r-panel); overflow: hidden;
  transform-origin: 50% 0;
}
/* The last card's pan budget is a spacer inside the stack, not a margin:
   a sticky card is released at its margin edge, which left 90svh of blank paper. */
.card:nth-last-child(2) { margin-bottom: 0; }
.make__spacer { height: var(--budget); }
.card__text { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding-right: var(--gut); }
.card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-card); line-height: var(--lh-title); letter-spacing: var(--tr-title);
}
.card p { max-width: 32ch; }
.card__art { position: relative; overflow: hidden; min-width: 0; }
.card__track { display: flex; gap: 12px; height: 100%; will-change: transform; }
.card__track img { height: 100%; width: auto; flex: 0 0 auto; aspect-ratio: 4 / 5; object-fit: cover; }
.card__track img[width="720"] { aspect-ratio: 1; }

/* ----------------------------------------------------------------- close -- */
.close__stage {
  background: var(--canvas); color: var(--canvas-ink);
  display: grid; grid-template-rows: 1fr auto; padding: 96px var(--gut) 0;
}
.close__plate {
  position: relative; z-index: 2; align-self: center; justify-self: start;
  border-top: var(--rule-strong); padding-top: 18px; width: min(34rem, 54vw);
}
.close__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-title); line-height: 0.94; letter-spacing: var(--tr-title);
  text-wrap: balance;
}
.close__facts { margin: 24px 0 28px; }   /* .facts */
.close .foot { max-width: 62%; }   /* clear of the portrait */
.close__plate .cta { font-size: var(--fs-l); }
.olgun {
  position: absolute; right: 2vw; bottom: 0; z-index: 2;
  width: clamp(300px, 44vw, 700px);
  transform: translateY(var(--rise, 60%));
  will-change: transform;
}
.olgun__head { position: relative; transform-origin: 50% 100%; will-change: transform; }
/* Vector portrait (his own SVG), so edges stay sharp at any size. The irises are
   groups inside the eye clip paths; they move in SVG units (1px = 1 unit). */
.olgun__svg { display: block; width: 100%; height: auto; overflow: visible; }
.olgun__iris { transform: translate(calc(var(--ex, 0) * 20px), calc(var(--ey, 0) * 9px)); }


/* --------------------------------------------------------- small screens -- */
@media (max-width: 820px) {

  .hero__stage { padding-top: 76px; }
  .index a { font-size: clamp(1.45rem, 7.2vw, 2.4rem); }
  .hero__cover { width: 44vw; }
  .hero__foot { flex-direction: column; align-items: stretch; }
  .hero__foot .cta { align-self: flex-start; }

  .drop { height: 160vh; }
  .drop__hand { right: -8vw; width: 92vw; }
  .drop__title, .drop__lede { grid-column: 1 / -1; }
  .drop__lede { margin-top: 16px; }
  .lego { height: 190svh; }
  /* Stacked: words on top, the whole drawing under them, never taller than the room left. */
  /* Stacked: words on top, the whole drawing under them, never taller than the room left. */
  .lego__col { top: auto; bottom: 0; width: min(100%, calc((100svh - 250px) * 0.7207)); height: auto; aspect-ratio: 1462.68 / 2029.61; }
  .lego__art { inset: auto; width: 101.2%; left: -0.6%; top: -0.4%; }
  .lego__copy { top: 84px; bottom: auto; right: var(--gut); }
  .lego__title { gap: 12px; }
  .lego__say { font-size: clamp(1.6rem, 6.8vw, 2.4rem); max-width: 17ch; }
  .lego__hints { margin-top: 10px; padding-top: 0; }
  .rack { height: 440svh; }
  .rack__room { perspective: 1300px; perspective-origin: 30% 30%; }
  .rack__row { left: 30%; top: 66%; }
  .print { --w: 54vw; }
  .rack__label { left: var(--gut); right: var(--gut); width: auto; bottom: 64px; }
  .rack__more { bottom: 22px; }

  .make__head h2, .make__head p { grid-column: 1 / -1; }
  .make__head p { margin-top: 16px; }
  .make { --card-h: min(82svh, 660px); --top: 72px; }
  .card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; top: calc(var(--top) + var(--i, 0) * 14px); padding: 22px 0 22px 22px; }
  .card__text { padding-right: 22px; gap: 12px; }

  .olgun { right: -10vw; width: 62vw; }   /* clear of the footer links */
  .close__plate { width: 100%; }
  .close .foot { max-width: 50%; }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .say, .close { height: auto !important; }
  .hero__stage, .say__stage, .close__stage { position: relative; min-height: 100svh; height: auto; }
  .hero__cover, .index a, .hero__stage { transition: none; }
  .drop { height: auto; }
  .drop__stage { position: relative; height: auto; min-height: 100svh; }
  .drop__hand, .olgun { transform: none; }
  .lego { height: 100svh; }
  .rack { height: auto; }
  .rack__stage { position: relative; height: auto; overflow: visible; padding: 96px var(--gut) 140px; }
  .rack__room { position: static; perspective: none; }
  .rack__row { position: static; width: auto; height: auto; transform: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 32px var(--gut); }
  .print { position: static; width: auto; transform: none !important; opacity: 1 !important; }
  .print__cap { display: block; margin-top: 10px; font-size: 0.9rem; }
  .rack__label { display: none; }
  .card { position: relative; top: auto; margin-bottom: 24px; }
  .card:nth-last-child(2) { margin-bottom: 0; }
  .make__spacer { display: none; }
  .card__art { overflow-x: auto; }
}


/* Right-hand descriptions sit flush to the right gutter, so their distance from the
   right edge equals the big title's distance from the left edge ([data-fit]). */
.make__head p, .drop__lede { justify-self: end; }
@media (max-width: 820px) { .make__head p, .drop__lede { justify-self: start; } }

/* Revision 11: wider character stage, playful inline drawings and larger prints. */
@media (min-width: 821px) {
  .lego__art { --aw: max(calc(var(--split) * 1.12), calc(100svh * 0.7207 * 1.12)); }
  .lego__say { font-size: clamp(1.7rem, 3.25vw, 3.6rem); }
  .olgun { right: 5vw; bottom: 12svh; width: clamp(300px, 40vw, 640px); }
  .print { --w: clamp(280px, 32vw, 520px); }
  .rack__row { left: 28%; top: 82%; }
}
.chip { position: relative; }
.chip img { transition: transform 300ms var(--ease), opacity 180ms; transform-origin: 50% 75%; }
.chip:hover img { transform: scale(1.42) rotate(-5deg); }
.chip .chip__smile { position: absolute; inset: 0; opacity: 0; }
.chip:hover .chip__neutral { opacity: 0; }
.chip:hover .chip__smile { opacity: 1; }
@media (max-width: 820px) {
  .lego__col { right: 0; width: min(100%, calc((100svh - 250px) * 0.86)); }
  .lego__art { width: 112%; left: -6%; top: -2%; }
  .olgun { right: 1vw; bottom: 8svh; width: 58vw; }
  .print { --w: 66vw; }
}
@media (prefers-reduced-motion: reduce) {
  .chip img { transition: none; }
  .chip:hover img { transform: none; }
}
@media (max-width: 820px) {
  .lego__col { top: 310px; bottom: 0; width: 100%; height: auto; aspect-ratio: auto; }
  .lego__art { width: max(100%, calc((100svh - 310px) * 0.81)); left: 50%; translate: -50% 0; top: -4%; }
  .lego__say { font-size: clamp(1.45rem, 5.8vw, 2rem); }
  .lego__hints { font-size: 10px; }
}
@media (max-width: 820px) { .lego__art { top: -22vw; } }

/* Revision 2: the new opening scene introduces the person and the supplied art. */
:root { --split: 63vw; }
.js .loader { display: none; }
.welcome { position: relative; min-height: 100svh; overflow: hidden; background: #000; color: #fff; display: grid; grid-template-columns: minmax(0, 42%) 1fr; padding: 112px var(--gut) 58px; }
.welcome__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 3vh 0; }
.welcome__eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; margin-bottom: clamp(24px, 5vh, 64px); }
.welcome h1 { font-family: var(--font-display); font-size: clamp(4.3rem, 8.2vw, 11rem); line-height: .78; letter-spacing: -.07em; font-weight: 700; }
.welcome__dots { color: #f4a4ec; }
.welcome__lede { max-width: 24ch; font-family: var(--font-display); font-size: clamp(1.2rem, 1.8vw, 2rem); line-height: 1.17; font-weight: 500; margin-top: clamp(28px, 6vh, 78px); }
.welcome__actions { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 30px; }
.welcome__actions a { color: inherit; text-decoration: underline; text-underline-offset: .25em; font-weight: 600; }
.welcome__actions a:hover { color: var(--sun); }
.welcome__garden { position: absolute; z-index: 1; width: 64vw; height: 100%; right: -5vw; top: 0; overflow: hidden; }
.welcome__art { position: absolute; width: 145%; max-width: none; height: 100%; right: -10%; bottom: 0; object-fit: contain; object-position: center bottom; transform-origin: 50% 100%; animation: garden-grow 2s cubic-bezier(.18,.75,.27,1) both; }
.welcome__flower { position: absolute; z-index: 2; font-size: clamp(42px, 7vw, 110px); transform: scale(0); animation: flower-open .8s cubic-bezier(.18,1.4,.4,1) forwards; }
.welcome__flower--one { color: #fdc434; left: 22%; top: 25%; animation-delay: 1.65s; }
.welcome__flower--two { color: #e30f14; right: 18%; top: 16%; animation-delay: 1.95s; }
.welcome__ant { position: absolute; z-index: 3; color: #fff; font-size: 22px; top: 18%; left: 12%; opacity: 0; animation: ant-walk 11s linear 2.5s infinite; }
.welcome__ant--two { top: 58%; left: 27%; animation-delay: 4s; animation-duration: 14s; }
.welcome__spider { position: absolute; z-index: 3; right: 24%; top: 0; width: 1px; height: 24%; background: #f1e0e4; transform: translateY(-125%); animation: spider-down 2.8s ease-in-out 2.6s forwards; }
.welcome__spider span { position: absolute; bottom: -34px; left: -27px; font-size: 55px; color: #f1e0e4; line-height: 1; }
.welcome__scroll { position: absolute; bottom: 24px; left: var(--gut); z-index: 3; font-size: var(--fs-xs); }
@keyframes garden-grow { from { transform: translateY(20%) scale(.68); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes flower-open { to { transform: scale(1) rotate(16deg); } }
@keyframes ant-walk { 0% { transform: translate(0,0) rotate(-20deg); opacity: 0; } 5%,85% {opacity:1;} 100% { transform: translate(42vw,8vh) rotate(20deg); opacity:0;} }
@keyframes spider-down { to { transform: translateY(0); } }
.lego__hand { position: absolute; z-index: 3; right: -8%; top: -6%; width: min(50vw, 750px); max-width: none; pointer-events: none; opacity: 0; transform: translate3d(8%, -70%,0) rotate(-8deg); transform-origin: 80% 0; transition: opacity 250ms, transform 950ms ease-in-out; }
.lego__stage.is-repairing .lego__hand { opacity: 1; transform: translate3d(calc(-12% - var(--repair) * 8%), calc(-12% + var(--repair) * 40%), 0) rotate(calc(-8deg + var(--repair) * 13deg)); }
.lego__say { font-size: clamp(1.65rem, 2.7vw, 3.3rem); }
.rack { background: #000; color: #fff; }
.rack__label { border-color: #fff; }
.rack__more { color: #fff; }
.rack__more:hover { color: var(--sun); }
@media (max-width: 820px) {
  .welcome { display: block; padding: 106px var(--gut) 30px; min-height: 100svh; }
  .welcome__copy { justify-content: flex-start; }
  .welcome h1 { font-size: clamp(4.2rem, 16vw, 8rem); }
  .welcome__lede { max-width: 20ch; margin-top: 25px; }
  .welcome__garden { width: 130vw; height: 60%; top: auto; bottom: -8%; right: -38vw; opacity: .85; }
  .welcome__art { width: 150%; right: -20%; height: 100%; }
  .welcome__flower--one { top: 5%; left: 23%; }
  .welcome__flower--two { top: 22%; right: 12%; }
  .welcome__scroll { bottom: 12px; }
  .lego__hand { width: 80vw; right: -25%; top: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome__art, .welcome__flower, .welcome__ant, .welcome__spider { animation: none; opacity: 1; transform: none; }
  .welcome__ant, .welcome__spider { display: none; }
  .lego__hand { transition: none; }
}
@media (min-width: 821px) {
  .welcome__garden { width: 57vw; right: -8vw; }
  .welcome__art { width: 120%; right: -8%; }
}
@media (max-width: 820px) {
  .welcome { min-height: 115svh; }
  .welcome__garden { top: 62%; bottom: auto; height: 39%; width: 120vw; right: -27vw; }
  .welcome__art { width: 120%; right: -12%; }
}
.welcome__ant img { display: block; width: 38px; }
.welcome__spider img { position: absolute; bottom: -42px; left: -27px; display: block; width: 56px; }
/* Revision 3: one-time, full-screen greeting with plants only. */
html.intro-active { overflow: hidden; }
.welcome { position: fixed; inset: 0; z-index: 120; min-height: 100svh; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; place-items: center; padding: 0; background: #000; color: #fff; opacity: 1; transition: opacity 600ms ease, transform 600ms ease; isolation: isolate; }
.welcome[hidden] { display: none; }
.welcome.is-leaving { opacity: 0; transform: translateY(-4%); pointer-events: none; }
.welcome__garden { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.welcome__vines { position: absolute; width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 80%; animation: intro-grow 2.5s cubic-bezier(.2,.7,.2,1) both; }
.welcome__flower { position: absolute; left: var(--fx); top: var(--fy); right: auto; width: clamp(48px, 8vw, 130px); height: auto; transform: translate(-50%,-50%) scale(0) rotate(-28deg); animation: intro-bloom .8s cubic-bezier(.2,1.5,.35,1) var(--delay) forwards; }
.welcome h1.welcome__title { position: relative; z-index: 2; margin: 0; padding: 0 .05em .1em; font: 700 clamp(4rem, 15vw, 17rem)/.88 var(--font-display); letter-spacing: -.075em; text-align: center; white-space: nowrap; text-shadow: 0 5px 25px #000, 0 0 60px #000; clip-path: inset(0 100% 0 0); animation: intro-type 1.45s steps(14,end) .2s forwards; }
.welcome__title span { color: #fdc434; }
.welcome__enter { position: absolute; z-index: 3; bottom: clamp(28px, 5vh, 58px); left: 50%; transform: translateX(-50%); min-width: 200px; border: 1px solid #aaa; border-radius: 99px; color: #fff; background: #000; padding: 13px 21px; display: flex; justify-content: space-between; gap: 18px; font: 600 var(--fs-s) var(--font-text); cursor: pointer; }
.welcome__enter:hover { background: #fff; color: #000; }
.welcome__progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--sun); animation: intro-progress 2.6s linear forwards; }
.welcome__ant { position: absolute; z-index: 2; width: 38px; height: auto; left: 10%; top: 12%; opacity: 0; animation: ant-walk 9s linear 3s infinite; }
.welcome__ant--two { left: 60%; top: 58%; animation-delay: 3.8s; }
.welcome__spider { z-index: 2; right: 18%; }
@keyframes intro-grow { from { opacity: 0; transform: scale(.1); } to { opacity: 1; transform: scale(1); } }
@keyframes intro-bloom { to { transform: translate(-50%,-50%) scale(1) rotate(0); } }
@keyframes intro-type { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-progress { to { width: 100%; } }
.lego__word--people { color: #e30f14; }
.lego__word--objects { color: #0f7600; }
.lego__word--brands { color: #0454bc; }
.say__stage, .say__text, .chip { overflow: visible; }
.say__text .nw { transition: letter-spacing 220ms ease; }
.say__text .nw:hover { letter-spacing: .015em; }
.chip { transition: margin 220ms ease; }
.chip:hover { margin-left: .24em; margin-right: .26em; }
.chip:hover img { transform: scale(1.65) rotate(-4deg); }
@media (min-width: 821px) { .olgun { width: clamp(420px, 50vw, 820px); right: -2vw; bottom: 4svh; } .close__plate { width: min(32rem, 43vw); } .print { --w: clamp(340px, 37vw, 610px); } }
@media (max-width: 820px) {
  .welcome { min-height: 100svh; }
  .welcome__garden { top: 0; bottom: 0; width: 100%; height: 100%; right: 0; }
  .welcome__vines { object-fit: cover; object-position: center; }
  .welcome h1.welcome__title { font-size: clamp(4.4rem, 18vw, 8rem); }
  .welcome__flower { width: clamp(45px, 11vw, 80px); }
  .welcome__enter { bottom: 24px; }
  .olgun { width: 73vw; right: -7vw; bottom: 3svh; }
  .print { --w: 74vw; }
}
@media (prefers-reduced-motion: reduce) {
 .welcome, .welcome__vines, .welcome__flower, .welcome__title, .welcome__progress { transition: none; animation: none; }
 .welcome__vines { opacity: 1; transform: none; }
 .welcome__flower { transform: translate(-50%,-50%); }
 .welcome__title { clip-path: none; }
 .welcome__ant, .welcome__spider { display: none; }
}

/* Revision 4: the supplied vector artwork remains whole and aligned across layers. */
.welcome__garden > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.welcome__garden .welcome__flower { left: 0; top: 0; right: auto; width: 100%; height: 100%; transform-origin: var(--ox) var(--oy); transform: scale(0); animation: botanical-bloom .75s cubic-bezier(.17,1.4,.34,1) var(--delay) both; }
.welcome__garden .welcome__creature { z-index: 2; }
.welcome__creature--spider { transform: translateY(-45%); animation: botanical-spider 2s cubic-bezier(.2,.8,.3,1) 1.6s forwards; }
.welcome__creature--ant { animation: botanical-ant 6s ease-in-out 2s infinite alternate; }
.welcome__creature--ant:nth-last-child(2) { animation-delay: 2.8s; }
.welcome__creature--ant:nth-last-child(1) { animation-delay: 3.4s; }
.welcome__enter { min-width: 0; border: 0; border-radius: 0; background: none; padding: 0; display: block; font-weight: 500; letter-spacing: .02em; cursor: default; white-space: nowrap; text-shadow: 0 2px 9px #000; }
.welcome__enter:hover { background: none; color: #fff; }
.welcome__enter span { display: inline-block; padding-left: .35em; animation: scroll-nudge 1.8s ease-in-out infinite; }
.drop__characters { position: absolute; z-index: 1; right: 2vw; top: 12vh; width: min(62vw, 990px); aspect-ratio: 6713 / 2750.69; pointer-events: none; }
.drop__characters img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; object-fit: contain; will-change: transform, opacity; }
.drop__copy { z-index: 2; }
.drop__title { display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; }
.drop__title span { display: block; opacity: 0; transform: translateY(-1.15em); will-change: transform, opacity; }
@media (min-width: 821px) { .print { --w: clamp(280px, 32vw, 520px); } .olgun { right: 8vw; } }
@media (max-width: 820px) {
  .welcome__garden .welcome__flower { width: 100%; height: 100%; }
  .welcome__enter { bottom: 28px; }
  .drop__characters { width: 100vw; right: 0; top: 19vh; }
  .drop__title { font-size: clamp(3.9rem, 14vw, 7rem); }
  .print { --w: 66vw; }
  .olgun { right: 2vw; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome__garden .welcome__flower, .welcome__creature--spider, .welcome__creature--ant { animation: none; transform: none; opacity: 1; }
  .drop__characters img, .drop__title span { transform: none !important; opacity: 1 !important; }
}
@keyframes botanical-bloom { to { transform: scale(1); } }
@keyframes botanical-spider { to { transform: translateY(0); } }
@keyframes botanical-ant { 0% { transform: translateX(-1.2%); opacity: .6; } 100% { transform: translateX(1.2%); opacity: 1; } }
@keyframes scroll-nudge { 50% { transform: translateY(5px); } }