/* ===== Casa Aikido — "wow" layer (27/10/2026): motion on top of styles.css. Every effect respects prefers-reduced-motion. ===== */

/* Curtain: a short brand reveal on first load */
.curtain { position: fixed; inset: 0; z-index: 200; background: var(--bg-deep); color: var(--white); display: grid; place-items: center; transition: transform 1s var(--ease-out), visibility 0s 1s; }
.curtain__word { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 6vw, 5rem); letter-spacing: 0.04em; opacity: 0; transform: translateY(14px); animation: curtainWord 1.1s var(--ease-out) 0.1s forwards; }
.curtain__line { position: absolute; left: 50%; bottom: 18vh; width: 1px; height: 0; background: var(--clay-soft); animation: curtainLine 0.9s var(--ease-out) 0.5s forwards; }
.curtain.is-done { transform: translateY(-101%); visibility: hidden; }
html.no-curtain .curtain { display: none; }
@keyframes curtainWord { to { opacity: 1; transform: none; } }
@keyframes curtainLine { to { height: 10vh; } }

/* Reading progress hairline under the header */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* Cursor dot (fine pointers only) */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 300; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent); pointer-events: none; opacity: 0; transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), margin 0.35s var(--ease-out), background 0.3s, opacity 0.3s; mix-blend-mode: multiply; }
  .cursor.is-on { opacity: 0.85; }
  .cursor.is-link { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: rgba(151, 86, 52, 0.22); }
  .cursor.is-zoom { width: 60px; height: 60px; margin: -30px 0 0 -30px; background: rgba(251, 248, 243, 0.55); mix-blend-mode: normal; }
  .cursor.is-zoom::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font: 300 26px/1 var(--font-display); color: var(--ink); }
}

/* Hero: slow zoom, parallax and the title rising letter by letter */
.hero__img { transform-origin: 50% 30%; will-change: transform; animation: kenburns 9s var(--ease-out) forwards; }
@keyframes kenburns { from { transform: scale(1.12) translateY(var(--py, 0px)); } to { transform: scale(1.02) translateY(var(--py, 0px)); } }
.hero.is-settled .hero__img { animation: none; transform: scale(1.02) translateY(var(--py, 0px)); }
.hero__title--split .w { display: inline-block; white-space: nowrap; }
.hero__title--split i { display: inline-block; font-style: normal; opacity: 0; transform: translateY(0.6em) rotate(3deg); animation: letterUp 1.1s var(--ease-out) forwards; animation-delay: calc(0.9s + var(--i) * 0.055s); }
@keyframes letterUp { to { opacity: 1; transform: none; } }
.hero .eyebrow[data-reveal] { transition-delay: 0.8s; }
.hero__sub[data-reveal] { transition-delay: 1.5s; }

/* Chapter titles: a soft wipe from below, eyebrows with a line that draws */
.chapter__title[data-reveal] { clip-path: inset(0 0 100% 0); transform: translateY(0.25em); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out), clip-path 1.1s var(--ease-out); }
.chapter__title[data-reveal].is-visible { clip-path: inset(-10% 0 -10% 0); transform: none; }
.room__title .eyebrow::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease-out) 0.3s; }
.room__title .eyebrow.is-visible::after { transform: scaleX(1); }

/* Ghost chapter numbers drift at their own speed */
.room__head::before { transform: translateY(var(--gy, 0px)); will-change: transform; }

/* Renders and moodboard breathe on hover */
.zoom img { transition: transform 1.4s var(--ease-out); }
.zoom:hover img, .zoom:focus-visible img { transform: scale(1.025); }
.board__render.is-exploring .zoom:hover img { transform: none; }
.swatch__btn { transition: transform 0.6s var(--ease-out), box-shadow 0.6s; }
.swatch__btn:hover { transform: translateY(-4px) rotate(-3deg); }

/* Waves: a quiet moving line between chapters */
.wave { height: clamp(32px, 5vw, 60px); overflow: hidden; line-height: 0; background: var(--bg); }
.chapter--tint + .wave, .wave + .chapter--tint { background: var(--bg); }
.wave svg { width: 200%; height: 100%; display: block; animation: waveMove 14s linear infinite; }
.wave__p { fill: none; stroke: var(--clay); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0.35; }
.wave__p--b { stroke: var(--accent); opacity: 0.18; animation: waveMove 22s linear infinite reverse; }
@keyframes waveMove { to { transform: translateX(-50%); } }
.wave.off svg, .wave.off .wave__p { animation-play-state: paused; }

/* Amble extras: rotating sticker, word ticker, dotted road, shadow, sun */
.amble__head { position: static; }
.amble__sticker { position: absolute; right: 0; top: calc(var(--space-l) - 0.5rem); width: clamp(96px, 12vw, 150px); aspect-ratio: 1; display: grid; place-items: center; }
.amble__sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.amble__sticker text { font: 500 15px var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; fill: var(--accent); }
.amble__sticker img { width: 38%; height: auto; opacity: 0.9; }
.amble__sticker.off svg { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }
.amble__ticker { overflow: hidden; margin: var(--space-m) 0 0; padding: 0.75rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.amble__ticker-track { display: flex; width: max-content; animation: tick 32s linear infinite; }
.amble__ticker.off .amble__ticker-track { animation-play-state: paused; }
.amble__ticker-set { display: flex; align-items: center; gap: 1.4rem; padding-right: 1.4rem; font: 500 var(--fs-eyebrow)/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.amble__ticker-set i { font-style: normal; color: var(--accent); font-size: 0.7em; }
@keyframes tick { to { transform: translateX(-50%); } }
.amble__road { margin-top: var(--space-s); }
.amble__sun { position: absolute; right: 8%; top: 10%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(201, 161, 122, 0.55) 0, rgba(201, 161, 122, 0.18) 45%, transparent 70%); pointer-events: none; }
.amble__dash { position: absolute; left: 0; right: 0; bottom: 9%; height: 0; border-top: 2px dashed rgba(43, 38, 34, 0.28); pointer-events: none; background-size: 24px 2px; }
.amble__road--go .amble__dash { animation: dashRun 0.6s linear infinite; }
@keyframes dashRun { from { transform: translateX(0); } to { transform: translateX(-16px); } }
.amble__shadow { position: absolute; left: 14%; right: 14%; bottom: 7%; height: 6%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(43, 38, 34, 0.28), transparent 70%); filter: blur(4px); pointer-events: none; }
.amble__car { z-index: 1; }
.amble-stop[data-reveal] { transition-delay: calc(var(--d, 0) * 0.08s); }

/* Finale statement rises a little slower */
.together__statement[data-reveal] { transition-duration: 1.4s; }

@media (max-width: 900px) {
  .amble__sticker { position: relative; right: auto; top: auto; margin: 0.5rem 0 1rem; width: 96px; }
  .curtain__line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; }
  .hero__img, .hero.is-settled .hero__img { animation: none; transform: none; }
  .hero__title--split i { animation: none; opacity: 1; transform: none; }
  .chapter__title[data-reveal] { clip-path: none; }
  .room__title .eyebrow::after { transform: none; }
  .wave svg, .wave__p--b, .amble__sticker svg, .amble__ticker-track, .amble__road--go .amble__dash { animation: none; }
  .cursor { display: none !important; }
}

/* ===== 15 · THE GARDEN (27/10/2026): the slope as a section, layers, planting palette, seasons ===== */
.chapter--garden { background: var(--bg-tint); padding: var(--space-l) 0; }
.garden__head { max-width: var(--measure); margin-bottom: var(--space-m); }
.garden__statement { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.1; color: var(--ink); max-width: 28ch; margin: 0 0 var(--space-s); }
.garden__lead { max-width: var(--measure); }
.garden__lead p { font-size: var(--fs-sub); line-height: 1.5; margin: 0 0 1rem; }
.garden__principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: var(--space-m) 0; }
.gprin { background: var(--white); border-radius: 1rem; padding: 1.25rem 1.25rem 1.1rem; position: relative; overflow: hidden; transition-delay: calc(var(--d, 0) * 0.1s); }
.gprin::before { content: ""; position: absolute; left: 1.25rem; top: 0; width: 2.25rem; height: 2px; background: var(--olive); }
.gprin__k { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.05; color: var(--olive); margin: 0.6rem 0 0.4rem; }
.gprin p { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; }
.garden__section { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg); box-shadow: var(--shadow-board, 0 10px 40px rgba(43,38,34,.08)); }
.gslope { display: block; width: 100%; height: auto; }
.gs-ground { fill: #d9cbb3; }
.gs-line { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 2600; stroke-dashoffset: 2600; }
.is-visible .gs-line { animation: gsDraw 2.6s var(--ease-out) 0.2s forwards; }
@keyframes gsDraw { to { stroke-dashoffset: 0; } }
.gs-house rect { fill: var(--white); stroke: var(--ink); stroke-width: 1; }
.gs-water rect { fill: #7fa9a6; }
.gs-layer { transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); transform-origin: 50% 100%; }
.gs-layer[data-layer="canopy"] circle, .gs-layer[data-layer="canopy"] path { fill: #7a8b6a; }
.gs-layer[data-layer="canopy"] line { stroke: #6b5a48; stroke-width: 3; }
.gs-layer[data-layer="canopy"] .gs-pine path { fill: #3f5a3c; }
.gs-layer[data-layer="structure"] circle { fill: #5e6f52; }
.gs-layer[data-layer="structure"] path { fill: #8aa39a; }
.gs-layer[data-layer="ground"] path { fill: none; stroke: #8e7aa6; stroke-width: 2.2; stroke-linecap: round; }
.gs-layer[data-layer="stone"] rect { fill: #cdb58e; stroke: #b49a6c; stroke-width: 0.8; }
.gs-layer[data-layer="stone"] .gs-planter { fill: none; stroke: #cdb58e; stroke-width: 4; }
.garden__section.has-focus .gs-layer { opacity: 0.18; }
.garden__section.has-focus .gs-layer.is-focus { opacity: 1; transform: translateY(-3px); }
.gs-dot { fill: var(--accent); }
.gs-dot::after { content: none; }
.garden__caption { margin: 0; padding: 0.8rem var(--space-s) 0.9rem; font-size: var(--fs-small); color: var(--ink-soft); font-family: var(--font-display); font-style: italic; }
.garden__layers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin: 0.75rem 0 var(--space-l); }
.glayer { text-align: left; background: transparent; border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.1rem; cursor: pointer; transition: background 0.4s, border-color 0.4s, transform 0.4s var(--ease-out); color: var(--ink); }
.glayer:hover { transform: translateY(-2px); border-color: var(--olive); }
.glayer.is-on { background: var(--white); border-color: var(--olive); }
.glayer__n { display: block; font-size: var(--fs-eyebrow); letter-spacing: 0.2em; color: var(--olive); margin-bottom: 0.4rem; }
.glayer b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.1; margin-bottom: 0.35rem; }
.glayer p { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45; }
.garden__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.25rem, 4vw, 3rem); align-items: start; }
.garden__refs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.garden__refs .zoom { display: block; border-radius: var(--radius); overflow: hidden; }
.garden__refs .zoom:first-child { grid-row: 1 / 3; }
.garden__refs img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/5; }
.garden__refs .zoom:not(:first-child) img { aspect-ratio: 4/3; }
.garden__palette .swatches { margin-top: 1rem; }
.garden__fine { font-size: 0.78rem; color: var(--ink-soft); margin-top: 1rem; line-height: 1.5; max-width: 36rem; }
.garden__seasons { margin-top: var(--space-l); }
.garden__seasons h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.05; margin: 0 0 1.25rem; }
.gseasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.gseason { background: var(--white); border-radius: 1.1rem; padding: 1.1rem 1.1rem 1rem; transition-delay: calc(var(--d, 0) * 0.08s); }
.gseason__n { display: inline-block; font-family: var(--font-display); font-size: 0.95rem; color: var(--olive); border: 1px solid var(--olive); border-radius: 999px; padding: 0.2rem 0.6rem; margin-bottom: 0.6rem; }
.gseason h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; margin: 0 0 0.35rem; }
.gseason p { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 900px) {
  .garden__principles, .garden__grid, .gseasons { grid-template-columns: 1fr; }
  .garden__layers { grid-template-columns: 1fr 1fr; }
  .garden__refs .zoom:first-child { grid-row: auto; grid-column: 1 / -1; }
  .garden__refs .zoom:first-child img { aspect-ratio: 16/10; }
}
@media (max-width: 560px) { .garden__layers { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gs-line { stroke-dashoffset: 0; animation: none; } .gs-dot { display: none; } }
.garden__note { max-width: var(--measure); font-size: var(--fs-small); color: var(--ink-soft); border-left: 2px solid var(--olive); padding-left: 1rem; margin: 0 0 var(--space-s); line-height: 1.5; }

/* ===== Hero as the architect's drawing (27/10/2026, Jean: «el visual hero no es el proyecto») ===== */
.hero--drawing { display: grid; grid-template-rows: auto 1fr; align-items: start; color: var(--ink); background: var(--bg-mood); min-height: 85svh; }
.hero--drawing .hero__content { order: 1; padding-top: calc(env(safe-area-inset-top, 0px) + clamp(6rem, 14vh, 9rem)); padding-bottom: 1.5rem; }
.hero--drawing .hero__media { order: 2; position: relative; inset: auto; z-index: auto; background: transparent; display: flex; align-items: flex-end; padding: 0 var(--gutter) clamp(3rem, 7vh, 5rem); max-width: var(--container); margin-inline: auto; width: 100%; }
.hero--drawing .hero__media::after { display: none; }
.hero--drawing .hero__img { width: 100%; height: auto; object-fit: contain; object-position: 50% 100%; mix-blend-mode: multiply; isolation: auto; animation: heroWipe 2.4s var(--ease-out) 0.7s both; transform: none !important; }
@keyframes heroWipe { from { clip-path: inset(0 100% 0 0); opacity: 0.4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.hero--drawing .eyebrow--light { color: var(--accent); opacity: 1; }
.hero--drawing .hero__sub { color: var(--ink-soft); opacity: 1; }
.hero__credit { margin: 0.9rem 0 0; font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.hero--drawing .hero__scroll span { background: var(--ink); }
@media (max-width: 900px) { .hero--drawing { min-height: auto; } .hero--drawing .hero__img { min-height: 38vw; } .hero--drawing .hero__content { padding-top: calc(env(safe-area-inset-top, 0px) + 5.5rem); } .hero--drawing .hero__media { padding-bottom: 4.5rem; } }
@media (prefers-reduced-motion: reduce) { .hero--drawing .hero__img { animation: none; clip-path: none; opacity: 1; } }