/* =========================================================================
   SkyLoft — public website (home, booking, info pages, weather).
   Theme "Dolomiti": enrosadira palette over the base tokens (base.css).
   ========================================================================= */

/* Links inside running text must look like links. */
p a:not(.btn), .fine-print a, .info-page a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Reveal-on-scroll (only when JS runs: without it the content stays visible) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media print { .js .reveal { opacity: 1; transform: none; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(246, 241, 231, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; }
.nav { display: none; gap: 2rem; font-weight: 600; font-size: var(--fs-md); }
.nav a { position: relative; padding-block: .2em; }
.nav a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--terracotta); transition: width .25s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after, .nav a.is-section::after { width: 100%; }
.mobile-nav a[aria-current="page"] { color: var(--rose-deep); }
.site-header__actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; padding: 9px; margin-right: -9px; }
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--charcoal); transition: transform .25s var(--ease), opacity .25s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: flex; flex-direction: column; gap: 4px; max-height: 0; overflow: hidden; visibility: hidden;
  transition: max-height .35s var(--ease), visibility 0s .35s; border-top: 1px solid transparent;
}
.mobile-nav.is-open { max-height: 85vh; overflow-y: auto; visibility: visible; transition: max-height .35s var(--ease); border-top-color: var(--line); }
.mobile-nav a { padding: 14px 24px; font-weight: 600; }
.mobile-nav .btn { margin: 10px 24px 16px; }

.lang-switch { display: none; gap: 2px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; }
.lang-switch a { display: inline-flex; align-items: center; min-height: 32px; padding: .55em .65em; border-radius: 6px; color: var(--brown-muted); }
.lang-switch a:hover { color: var(--charcoal); }
.lang-switch a.is-active { color: var(--night); background: var(--cream-deep); }
.lang-switch--mobile { display: flex; padding: 8px 18px; }

/* One breakpoint for the desktop nav and the language switch (no gap where neither shows). */
@media (min-width: 960px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none; }
  .lang-switch { display: flex; }
  .lang-switch--mobile { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; min-height: min(92vh, 820px); padding: clamp(48px, 8vw, 96px) 0 clamp(300px, 24vw, 360px); overflow: hidden; color: var(--white); background: var(--night); }
.hero__art { position: absolute; inset: 0; z-index: -1; }
.hero__art .dolomites { width: 100%; height: 100%; display: block; }
.hero__content { max-width: 780px; text-align: center; margin-inline: auto; }
.hero h1 { color: var(--white); font-weight: 500; text-shadow: 0 2px 30px rgba(28, 33, 64, .45); }
.hero__lead { text-shadow: 0 1px 14px rgba(28, 33, 64, .85), 0 0 2px rgba(28, 33, 64, .5); color: #fbeee8; font-size: clamp(1.05rem, 1vw + .8rem, 1.3rem); max-width: 50ch; margin: .8em auto 2em; }
.eyebrow--light { color: var(--apricot); }
.hero :focus-visible, .direct :focus-visible, .site-footer :focus-visible, .section--alpine :focus-visible { outline-color: var(--apricot); }

/* Hero illustration (partials/dolomites.php): Moena by season (data-season) and light (data-phase). */
.dolomites {
  --snow: #f7f9fc; --alpen: #ff8f87; --larchmark: #d9a03a; --glass: #8fa9c4;
  --wood: #85552f; --shutter: #4e7a58; --finial: #d9b25a;
}
.dolomites[data-season="inverno"] {
  --rock: #c9ccd3; --rock-dark: #8d93a0; --snow-op: 1; --snow-low-op: 1; --forest: #4a575d; --tree-mark: #dfe6ee;
  --larch-op: 0; --meadow: #edf2f8; --meadow-near: #f4f7fb; --flowers-op: 0; --roof-snow-op: 1; --clouds-season: .45; --geranium-season: 0; --xmas-season: 1;
}
.dolomites[data-season="primavera"] {
  --rock: #d2cbbf; --rock-dark: #9a8f80; --snow-op: .85; --snow-low-op: .5; --forest: #2f4a37; --tree-mark: #23392a;
  --larch-op: 0; --meadow: #93bd5c; --meadow-near: #a5c96a; --flowers-op: 1; --roof-snow-op: 0; --clouds-season: .9; --geranium-season: .85; --xmas-season: 0;
}
.dolomites[data-season="estate"] {
  --rock: #d8cdb9; --rock-dark: #9c907e; --snow-op: 0; --snow-low-op: 0; --forest: #2a4433; --tree-mark: #1d3125;
  --larch-op: 0; --meadow: #79a44e; --meadow-near: #8db35a; --flowers-op: .7; --roof-snow-op: 0; --clouds-season: 1; --geranium-season: 1; --xmas-season: 0;
}
.dolomites[data-season="autunno"] {
  --rock: #d3c5ae; --rock-dark: #9a8c78; --snow-op: .4; --snow-low-op: 0; --forest: #34432f; --tree-mark: #273325;
  --larch-op: 1; --meadow: #b4a061; --meadow-near: #c1ac6d; --flowers-op: 0; --roof-snow-op: 0; --clouds-season: .8; --geranium-season: 0; --xmas-season: 1;
}
.dolomites[data-phase="giorno"] {
  --sky1: #1d4d9a; --sky2: #3471bd; --sky3: #7eaadb; --sky4: #c7dcef; --scrim-op: 1; --attic: 0; --haze: #d6e4f2; --haze-op: .3;
  --sun-op: 1; --moon-op: 0; --stars-op: 0; --dawn-op: 0; --dusk-op: 0; --clouds-op: 1; --cloud: #fff;
  --shade: #000; --shade-op: 0; --alpen-op: 0; --lights: .75; --lights-fill: #5a4034; --wall: #ece2d0; --roof: #5b3d32; --facade-shade-op: 0; --win-off: #5a4034; --geranium-light: 1; --xmas-bulb: .5; --xmas-glow: 0; --church-lit: 0; --lamp-glow: 0;
}
.dolomites[data-phase="alba"] {
  --sky1: #27305e; --sky2: #6f5f96; --sky3: #e7a5a0; --sky4: #fbd6ae; --scrim-op: 0; --attic: .7; --haze: #f1c4bd; --haze-op: .2;
  --sun-op: 0; --moon-op: 0; --stars-op: .2; --dawn-op: 1; --dusk-op: 0; --clouds-op: .8; --cloud: #f7cdbf;
  --shade: #4b3f73; --shade-op: .3; --alpen: #ffb59a; --alpen-op: .45; --lights: .6; --lights-fill: #ffcf73; --wall: #b6a3a8; --roof: #3e2c33; --facade-shade-op: .38; --win-off: #3d3138; --geranium-light: .7; --xmas-bulb: .95; --xmas-glow: .35; --church-lit: .3; --lamp-glow: .55;
}
.dolomites[data-phase="tramonto"] {
  --sky1: #1c2140; --sky2: #3f3766; --sky3: #c9788a; --sky4: #f7cf9c; --scrim-op: 0; --attic: 1; --haze: #e3a4a8; --haze-op: .16;
  --sun-op: 0; --moon-op: 0; --stars-op: .4; --dawn-op: 0; --dusk-op: 1; --clouds-op: .8; --cloud: #f2a9a2;
  --shade: #5b3150; --shade-op: .22; --alpen-op: .8; --lights: .9; --lights-fill: #ffcf73; --wall: #a8898f; --roof: #3a2830; --facade-shade-op: .34; --win-off: #3b2c36; --geranium-light: .7; --xmas-bulb: 1; --xmas-glow: .45; --church-lit: .5; --lamp-glow: .65;
}
.dolomites[data-phase="notte"] {
  --sky1: #070b22; --sky2: #121a40; --sky3: #222c5a; --sky4: #36406e; --scrim-op: 0; --attic: 1; --haze: #36406e; --haze-op: .12;
  --sun-op: 0; --moon-op: 1; --stars-op: 1; --dawn-op: 0; --dusk-op: 0; --clouds-op: 0; --cloud: #3a4470;
  --shade: #0c1230; --shade-op: .55; --alpen-op: 0; --lights: 1; --lights-fill: #ffcf73; --wall: #2a2836; --roof: #14131c; --facade-shade-op: .8; --win-off: #1b1a27; --geranium-light: .35; --xmas-bulb: 1; --xmas-glow: .6; --church-lit: 1; --lamp-glow: .9;
}
.dolomites * { transition: fill 2s, opacity 2s, stop-color 2s; }
.dl-sky1 { stop-color: var(--sky1); } .dl-sky2 { stop-color: var(--sky2); }
.dl-sky3 { stop-color: var(--sky3); } .dl-sky4 { stop-color: var(--sky4); }
.dl-scrim { opacity: var(--scrim-op); }
.dl-dawn { opacity: var(--dawn-op); } .dl-dusk { opacity: var(--dusk-op); }
.dl-sun { opacity: var(--sun-op); } .dl-moon { opacity: var(--moon-op); } .dl-stars { opacity: var(--stars-op); }
.dl-sun__rays { fill: #ffd45c; stroke: #ffd45c; stroke-width: 3; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; animation: dl-turn 240s linear infinite; }
.dl-sun__disc { fill: #ffc93f; } .dl-sun__core { fill: #ffe58a; }
.dl-moon__dark { fill: #c9d2ee; opacity: .14; } .dl-moon__lit { fill: #f8efcf; } .dl-moon__crater { fill: #e2d4a6; }
.dl-sparkle { fill: #fff8de; animation: dl-twinkle 5s ease-in-out infinite; }
@keyframes dl-turn { to { transform: rotate(360deg); } }
@keyframes dl-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dl-sun__rays, .dl-sparkle { animation: none; } }
.dl-clouds { fill: var(--cloud); opacity: calc(var(--clouds-op) * var(--clouds-season)); }
.dl-rock { fill: var(--rock); } .dl-rock-dark { fill: var(--rock-dark); opacity: .55; }
.dl-snow { fill: var(--snow); opacity: var(--snow-op); } .dl-snow-low { fill: var(--snow); opacity: var(--snow-low-op); }
.dl-alpen { fill: var(--alpen); opacity: var(--alpen-op); }
.dl-forest { fill: var(--forest); } .dl-treemark { fill: var(--tree-mark); }
.dl-larch { opacity: var(--larch-op); } .dl-larchmark { fill: var(--larchmark); }
.dl-meadow { fill: var(--meadow); } .dl-meadow-near { fill: var(--meadow-near); } .dl-flowers { opacity: var(--flowers-op); }
.dl-shade { fill: var(--shade); opacity: var(--shade-op); }
.dl-haze { fill: var(--haze); opacity: var(--haze-op); } .dl-haze--near { opacity: calc(var(--haze-op) * .4); }
.dl-wall { fill: var(--wall); } .dl-roof { fill: var(--roof); } .dl-trees { opacity: .6; } .dl-roofsnow { fill: var(--snow); opacity: var(--roof-snow-op); }
.dl-lights { fill: var(--lights-fill); opacity: var(--lights); } .dl-light--dim { opacity: .55; } .dl-light--off { fill: var(--win-off); }
.dl-wood { fill: var(--wood); } .dl-trim { fill: #f6e2d4; } .dl-facet { fill: #000; opacity: .07; } .dl-shutter { fill: var(--shutter); } .dl-finial { fill: var(--finial); }
.dl-facade-shade { fill: var(--shade); opacity: var(--facade-shade-op); }
.dl-geraniums { fill: #d8413a; opacity: calc(var(--geranium-season) * var(--geranium-light)); } .dl-geranium--pink { fill: #ea6c93; }
.dl-uplight { opacity: var(--church-lit); }
.dl-paving { fill: #d9cebd; } .dl-trunk { fill: #6b4a33; } .dl-lamp-pole { fill: #3a3430; }
.dl-lamp-glow { opacity: var(--lamp-glow); }
.dl-summer { opacity: calc(1 - var(--xmas-season)); } .dl-stone { fill: #cfc3b2; } .dl-bed { fill: #5a8f45; }
.dl-trough-rim { fill: #a8733f; } .dl-square-flowers { opacity: calc((1 - var(--xmas-season)) * var(--geranium-light)); }
.dl-xmastree { opacity: var(--xmas-season); } .dl-xmastree__fir { fill: #2b5638; }
.dl-hut { fill: #8d5c34; } .dl-hut-win { fill: #ffd27a; }
.dl-letters { fill: #d8392f; } .dl-letters, .dl-letters-shade { font: 900 30px "Arial Black", "Arial", sans-serif; } .dl-letters-shade { fill: var(--shade); opacity: calc(var(--facade-shade-op) * .45); }
.dl-xmastree__glow { fill: #ffd27a; opacity: var(--xmas-glow); }
.dl-xmastree__bulbs { opacity: calc(.75 + .25 * var(--xmas-glow)); }
.dl-xmastree__halo { opacity: calc(.3 + var(--xmas-glow)); } .dl-xmastree__star { fill: #ffd24a; }
.dl-xmas__bulbs { fill: #fff2c4; opacity: calc(var(--xmas-season) * var(--xmas-bulb)); }
.dl-xmas__glow { fill: #ffc861; opacity: calc(var(--xmas-season) * var(--xmas-glow)); }
.dl-glass { fill: var(--glass); } .dl-attic { opacity: var(--attic); }
.dl-stars circle { animation: dl-twinkle 4s ease-in-out infinite; }
.dl-stars circle:nth-child(3n) { animation-delay: 1.3s; }
.dl-stars circle:nth-child(3n+1) { animation-delay: 2.6s; }
.dolomites__window-glow { animation: dl-glow 5s ease-in-out infinite; }
@keyframes dl-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
@keyframes dl-glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dolomites *, .dl-stars circle, .dolomites__window-glow { transition: none; animation: none; } }

.hero-search {
  display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 12px; align-items: end;
  background: var(--white); padding: 18px; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
}
.hero .hero-search { text-align: left; max-width: 760px; margin-inline: auto; color: var(--charcoal); background: rgba(255, 253, 249, .96); backdrop-filter: blur(6px); border-color: rgba(255, 255, 255, .6); }
.hero .hero-search :focus-visible { outline-color: var(--focus); }
.hero-search__field { display: flex; flex-direction: column; gap: 6px; }
.hero-search__field--guests input { width: 76px; }
.hero-search label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brown-muted); }
.hero-search input { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7em .8em; background: var(--cream); }
@media (max-width: 720px) {
  .hero-search { grid-template-columns: 1fr 1fr; }
  .hero-search .btn { grid-column: 1 / -1; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-section); }
/* Two plain cream sections in a row: one gap between them, not two (wide screens). */
@media (min-width: 1100px) {
  .section:not(.section--tint, .section--alpine, .direct) + .section:not(.section--tint, .section--alpine, .direct) { padding-top: 8px; }
}
.section--tint { background: var(--cream-deep); }
.section--tint + .section--tint { padding-top: 0; }
.section__lead { max-width: 60ch; font-size: 1.08rem; margin-top: .4em; }
.section--split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.section--split-top { align-items: start; }
@media (max-width: 820px) { .section--split { grid-template-columns: 1fr; } }

/* highlights */
.highlights { position: relative; z-index: 2; margin-top: -40px; }
.highlights__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.highlight { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-soft); }
.highlight__icon { width: 34px; height: 34px; color: var(--rose-deep); margin-bottom: 12px; }
.highlight h3 { font-size: 1.08rem; }
.highlight p { font-size: var(--fs-md); }
@media (max-width: 980px) { .highlights__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .highlights__grid { grid-template-columns: 1fr; } .highlights { margin-top: -70px; } }

/* apartment */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin-top: 8px; }
.features li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); font-weight: 600; font-size: .95rem; }
.features .icon { color: var(--rose-deep); width: 24px; height: 24px; }
@media (max-width: 520px) { .features { grid-template-columns: 1fr; } }

/* ---------- Gallery (links into the lightbox) ---------- */
.gallery__title { margin-top: clamp(32px, 4vw, 44px); font-size: 1.4rem; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; margin-top: 1.4rem; }
.gallery__item { display: block; position: relative; margin: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--cream-deep); }
.gallery__item--large { grid-column: span 2; grid-row: span 2; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item.is-extra, .views__item.is-extra { display: none; }
.gallery__more { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(28, 33, 64, .58); color: var(--white); font-weight: 700; letter-spacing: .02em; transition: background .3s var(--ease); }
.gallery__more .icon { width: 30px; height: 30px; }
.gallery__item:hover .gallery__more { background: rgba(28, 33, 64, .7); }
@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .gallery__item--large { grid-column: span 2; grid-row: span 1; }
}
.gallery-soon { display: flex; align-items: center; gap: 28px; margin-top: 1.4rem; padding: 28px 32px; border: 1px dashed #d8c3b3; border-radius: var(--radius-lg); background: linear-gradient(120deg, #fff7f1, var(--cream)); color: var(--rose-deep); }
.gallery-soon svg { width: 180px; flex: none; }
.gallery-soon p { max-width: 48ch; }
@media (max-width: 620px) { .gallery-soon { flex-direction: column; text-align: center; } .gallery-soon svg { width: 140px; } }

/* the view */
.views__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 14px; margin-top: 1.8rem; }
.views__item { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md); background: var(--cream-deep); }
.views__item:first-child { grid-column: span 2; grid-row: span 2; }
.views__item--portrait { grid-row: span 2; }
.views__item:has(.gallery__more) .views__caption { display: none; }
.views__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.views__item:hover img { transform: scale(1.04); }
.views__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 10px; background: linear-gradient(transparent, rgba(20, 22, 40, .72)); color: var(--white); font-size: var(--fs-sm); font-weight: 600; }
@media (max-width: 700px) {
  .views__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .views__item:first-child { grid-column: span 2; grid-row: span 1; }
  .views__item--portrait { grid-row: span 1; }
}

/* ---------- Moena (dark alpine band) ---------- */
.section--alpine { position: relative; overflow: hidden; color: #efe3df; background: radial-gradient(90% 120% at 90% 120%, rgba(228, 139, 125, .35), transparent 60%), linear-gradient(180deg, var(--night) 0%, var(--dusk) 100%); }
.section--alpine::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: var(--cream); clip-path: polygon(0 100%, 0 70%, 8% 52%, 12% 62%, 19% 30%, 24% 48%, 31% 40%, 38% 66%, 46% 44%, 52% 20%, 57% 46%, 64% 38%, 72% 62%, 80% 34%, 86% 50%, 93% 42%, 100% 60%, 100% 100%); }
.section--alpine h2 { color: var(--white); }
.section--alpine p { color: #e7d7d6; margin-bottom: 1em; font-size: 1.04rem; }
.section--alpine .wrap { position: relative; z-index: 1; padding-bottom: 24px; }
.facts { display: grid; gap: 14px; }
.facts li { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-md); background: rgba(255, 255, 255, .05); }
.facts strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--apricot); font-weight: 500; }
.facts span { font-weight: 600; letter-spacing: .02em; }
.facts__icon { width: 28px; height: 28px; color: var(--apricot); }
.moena-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: 90px !important; }
.moena-photos__item { display: block; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 3 / 2; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); }
.moena-photos__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.moena-photos__item:hover img { transform: scale(1.04); }
.moena-photos--more { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .moena-photos--more { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .moena-photos { grid-template-columns: 1fr; } .moena-photos--more { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* ---------- Seasons ---------- */
.seasons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 2rem; }
.season { border-radius: var(--radius-lg); padding: 30px; border: 1px solid var(--line); }
.season--winter { background: linear-gradient(160deg, #eef2f8, #f9fbfd); }
.season--summer { background: linear-gradient(160deg, #eef4ea, #fbfcf7); }
.season header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.season__icon { width: 30px; height: 30px; }
.season--winter .season__icon { color: #4a6fa5; }
.season--summer .season__icon { color: #c98a2e; }
.season header h3 { margin: 0; font-size: 1.4rem; }
.season ul { display: grid; gap: 12px; }
.season li { display: flex; gap: 10px; align-items: flex-start; color: var(--charcoal-soft); }
.season li .icon { color: var(--pine); margin-top: 3px; width: 18px; height: 18px; }
.season__more { display: inline-block; margin-top: 18px; font-weight: 700; color: var(--rose-deep); }
.season { display: flex; flex-direction: column; }
.season > ul:first-of-type { flex: 1; }
.season--year { background: linear-gradient(160deg, #f6eeea, #fdfaf8); }
.season--year .season__icon { color: var(--rose-deep); }
ul.season__links { display: grid; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.season__links a { font-weight: 700; color: var(--rose-deep); }
.seasons-more { margin-top: 1.6rem; text-align: center; }
.season__photo { position: relative; display: block; overflow: hidden; margin: -30px -30px 22px; aspect-ratio: 16 / 10; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--cream-deep); }
.season__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.season__photo:hover img { transform: scale(1.04); }
.season__count { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(28, 33, 64, .62); color: var(--white); font-size: var(--fs-sm); font-weight: 700; }
.season__count .icon { width: 16px; height: 16px; }
.season .is-extra { display: none; }
.seasons { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .seasons { grid-template-columns: 1fr; } }

/* The map box, our map and the explore pages: map.css (shared with the guest area). */

/* ---------- Book direct ---------- */
.direct { background: linear-gradient(115deg, var(--night) 0%, var(--dusk) 45%, var(--rose-deep) 100%); color: var(--white); }
.direct__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.direct h2 { color: var(--white); }
.direct p { color: #f2dfdc; }
.direct__list { display: grid; gap: 14px; }
.direct__list li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.direct__list .icon { color: var(--apricot); }
.direct__list .btn { margin-top: 10px; }
@media (max-width: 820px) { .direct__inner { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; margin-top: 1.5rem; }
.faq__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 22px; }
.faq__item summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; color: var(--rose-deep); font-size: 1.3rem; line-height: 1; }
.faq__item[open] summary::after { content: '–'; }
.faq__item p { margin-top: 10px; }
.faq__item a { color: var(--rose-ink); font-weight: 600; }
/* Wide screens: the questions in two columns across the page. */
@media (min-width: 1100px) {
  .wrap.faq-wrap { max-width: var(--wrap); }
  .faq { grid-template-columns: 1fr 1fr; gap: 14px 24px; align-items: start; }
}

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--night); color: #d8cdba; padding-top: 70px; margin-top: 50px; }
.site-footer__ridge { position: absolute; left: 0; right: 0; top: -59px; height: 60px; color: var(--night); }
.site-footer__ridge svg { width: 100%; height: 100%; display: block; }
.site-footer h3 { color: var(--cream); font-size: 1rem; font-family: var(--font-body); font-weight: 700; margin-bottom: 1em; }
/* Brand, book, the three guide groups, information: one row on wide screens, the brand above on smaller ones. */
.site-footer__grid { display: grid; grid-template-columns: 1.3fr repeat(5, 1fr); gap: 32px; padding-bottom: 40px; }
@media (max-width: 1100px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } .site-footer__grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 720px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } }
@media (max-width: 420px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer p { color: #cfc6dd; }
.site-footer__tagline { margin-top: 14px; line-height: 1.5; }
.footer-links li { margin-bottom: .6em; }
.footer-links a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; }
.footer-links a:hover { text-decoration-color: currentColor; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 20px; font-size: .82rem; }
.site-footer__bottom p { color: #a9a3c2; }
.brand--footer { color: var(--cream); }
.brand--footer .brand__mark { background: var(--apricot); }
.brand--footer small { color: #a9a3c2; }

/* ---------- Info pages ---------- */
.info-page h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); margin-bottom: .4em; }
.info-page h2 { font-size: 1.3rem; margin: 1.8em 0 .4em; }
.info-page p { line-height: 1.7; }
.info-page__updated { margin-top: 3em; }
.info-page h2.guide__brief { margin-top: 0; }
.rules-list { display: grid; gap: 12px; margin-top: 1.6rem; }
.rules-list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); }
.rules-list .icon { color: var(--rose-deep); margin-top: 2px; }

/* ---------- Booking page ---------- */
.booking-page { padding-block: 50px 100px; background: linear-gradient(180deg, #f1e7e3 0, var(--cream) 260px); }
.booking-form { margin-top: 32px; }
/* Desktop: a smaller title, so the calendar and the summary start within the first screen. */
@media (min-width: 960px) {
  .booking-page { padding-top: 32px; padding-bottom: 80px; }
  .booking-page h1 { font-size: clamp(2rem, 2.4vw + 1rem, 2.8rem); }
  .booking-form { margin-top: 20px; }
}
.booking-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 940px) { .booking-grid { grid-template-columns: 1fr; } }
.booking-summary { position: sticky; top: 100px; }
.summary-dates p { margin: 0; }
.summary-row { display: flex; justify-content: space-between; padding-block: 8px; font-size: .95rem; color: var(--charcoal-soft); }
.summary-row--total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; font-weight: 800; font-size: 1.1rem; color: var(--charcoal); }
.summary-row--note { font-size: .82rem; color: var(--brown-muted); gap: 12px; }
.summary-row--discount { color: var(--success); font-weight: 600; }
.summary-error { background: var(--danger-bg); color: var(--danger); padding: 10px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); margin: 12px 0; }
.booking-summary hr { border: none; border-top: 1px solid var(--line); margin: 20px 0; }
.fine-print { font-size: .78rem; color: var(--brown-muted); margin-top: 10px; text-align: center; }
.discount-field { margin: 12px 0 4px; font-size: .9rem; }
.discount-field summary { cursor: pointer; color: var(--terracotta-dark); font-weight: 600; }
.discount-field .field { margin: 10px 0 0; }

.stepper { display: inline-flex; align-items: center; gap: 14px; }
.stepper button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream); font-size: 1.1rem; line-height: 1; }
.stepper input { width: 46px; padding: .3em 0; text-align: center; border: none; background: transparent; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Calendar widget */
.calendar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.calendar__nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream); }
.calendar__nav:disabled { opacity: .35; cursor: not-allowed; }
.calendar__months { display: flex; gap: 40px; font-family: var(--font-display); font-size: 1.05rem; }
.calendar__grids { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.calendar-month__title { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 8px; text-transform: capitalize; }
@media (max-width: 700px) { .calendar__grids { grid-template-columns: 1fr; } .calendar__months { display: none; } }
@media (min-width: 701px) { .calendar-month__title { display: none; } }
.calendar-month__weekdays, .calendar-month__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-month__weekdays span { text-align: center; font-size: .72rem; font-weight: 700; color: var(--brown-muted); padding-block: 4px; }
.calendar-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font-size: .88rem; border: none; background: transparent; color: var(--charcoal);
}
.calendar-day:disabled, .calendar-day[aria-disabled="true"] { color: #a99d86; cursor: not-allowed; text-decoration: line-through; }
.calendar-day--empty { visibility: hidden; }
.calendar-day:not(:disabled):not([aria-disabled="true"]):hover { background: var(--cream-deep); }
.calendar-day.is-checkout-only { text-decoration: none; color: var(--charcoal); background: linear-gradient(135deg, transparent 50%, rgba(201, 103, 122, .14) 50%); }
.calendar-day.is-selected { background: var(--rose-deep); color: var(--white); font-weight: 700; }
.calendar-day.is-in-range { background: rgba(193, 103, 59, .16); border-radius: 6px; }
.calendar__legend { display: flex; gap: 20px; margin-top: 16px; font-size: .78rem; color: var(--brown-muted); flex-wrap: wrap; }
.calendar__error { margin-top: 12px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.dot--available { background: var(--cream-deep); border: 1px solid var(--line); }
.dot--selected { background: var(--rose-deep); }
.dot--blocked { background: #cabfa9; }

/* ---------- Status pages ---------- */
.status-page { text-align: center; padding-block: 80px; }
.status-page .btn { margin-top: 24px; }
.booking-recap { text-align: left; max-width: 420px; margin: 32px auto 0; }

/* ---------- Lightbox ---------- */
.lightbox { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; background: transparent; color: var(--white); overflow: hidden; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(12, 14, 28, .94); }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 64px 24px; max-width: 100%; }
.lightbox__figure img { max-width: min(100%, 1400px); max-height: calc(100vh - 140px); object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lightbox figcaption { font-size: .95rem; color: #e9e3f2; text-align: center; }
.lightbox__count { color: #a9a3c2; margin-left: 8px; font-variant-numeric: tabular-nums; }
.lightbox__btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: var(--white); font-size: 2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.lightbox__btn:hover, .lightbox__btn:focus-visible { background: rgba(255, 255, 255, .25); outline-color: var(--white); }
.lightbox__btn--close { top: 14px; right: 14px; font-size: 1.8rem; }
.lightbox__btn--prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 620px) {
  .lightbox__figure { padding: 60px 8px 20px; }
  .lightbox__btn--prev, .lightbox__btn--next { top: auto; bottom: 14px; transform: none; }
}

/* ---------- Weather ---------- */
ol.wx-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; margin-top: 1.4rem; }
.wx-day { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 18px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
ol.wx-days--detailed { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { ol.wx-days--detailed { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { ol.wx-days--detailed { grid-template-columns: 1fr; } }
/* Wide screens: five days in one row (six stay three by two), the six links in two tidy rows. */
@media (min-width: 1100px) {
  ol.wx-days--detailed:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); }
  .wx-page + .section--tint ul.wx-links { grid-template-columns: repeat(3, 1fr); }
}
.wx-home { padding-top: 0; }
.wx-i--sun { color: #d08a2e !important; }
.wx-i--moon, .wx-i--partly-night { color: #5f5b9a !important; }
.wx-i--snow, .wx-i--sleet { color: #4a6fa5 !important; }
.wx-i--storm { color: #7a4b8c !important; }
.wx-day__name strong { display: block; font-size: 1rem; }
.wx-day__name span { color: var(--brown-muted); font-size: var(--fs-sm); }
.wx-day__icon { width: 48px; height: 48px; color: var(--dusk); margin: 4px 0 2px; }
.wx-day__sky { font-size: .9rem; color: var(--charcoal-soft); min-height: 2.6em; line-height: 1.3; }
ul.wx-day__meta { display: grid; gap: 5px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); width: 100%; font-size: .84rem; color: var(--charcoal-soft); }
.wx-day__meta li { display: flex; align-items: center; gap: 7px; }
.wx-day__meta .icon { width: 16px; height: 16px; flex: none; color: var(--rose-deep); }
.wx-day__meta .wx-snow { color: #35588c; font-weight: 700; }
.wx-day__meta .wx-snow .icon { color: #4a6fa5; }
.wx-home__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.wx-source { margin-top: 16px; }
.wx-source a { color: var(--rose-ink); }
.wx-hero { position: relative; padding: clamp(70px, 11vw, 140px) 0 clamp(50px, 7vw, 90px); color: var(--white);
  background: linear-gradient(180deg, rgba(28, 33, 64, .45), rgba(28, 33, 64, .82)), var(--wx-photo, none) center 40% / cover no-repeat, var(--night); }
@media (max-width: 720px) {
  .wx-hero { background: linear-gradient(180deg, rgba(28, 33, 64, .45), rgba(28, 33, 64, .82)), var(--wx-photo-sm, var(--wx-photo, none)) center 40% / cover no-repeat, var(--night); }
}
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 1.4rem; padding: 0; list-style: none; font-size: .86rem; color: #e9dcd8; }
.crumbs li + li::before { content: '›'; margin: 0 .5em; opacity: .7; }
.crumbs a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
.crumbs a:hover { text-decoration-color: currentColor; }
.wx-hero h1 { color: var(--white); font-size: clamp(2.2rem, 4vw + 1rem, 3.6rem); text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.wx-hero__lead { max-width: 60ch; color: #f1e6e4; font-size: 1.08rem; }
.wx-heading { font-size: 1.4rem; margin-bottom: .2em; }
/* The hours scroll inside their own strip on small screens (flex children of fixed width, never wider than the page). */
ol.wx-hours { position: relative; /* keeps the hidden screen-reader text inside the strip */ display: flex; gap: 10px; max-width: 100%; overflow-x: auto; margin: 1rem 0 2.8rem; padding-bottom: 6px; }
.wx-hours li { flex: 1 0 82px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); text-align: center; }
.wx-hours__time { font-size: .8rem; font-weight: 700; color: var(--brown-muted); }
.wx-hours__icon { width: 34px; height: 34px; color: var(--dusk); }
.wx-hours strong { font-size: 1.15rem; }
.wx-hours__rain { display: flex; align-items: center; gap: 3px; font-size: .78rem; color: var(--charcoal-soft); }
.wx-hours__rain .icon { width: 13px; height: 13px; color: var(--rose-deep); }
ul.wx-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; margin: 1.6rem 0 1rem; }
.wx-links a { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.wx-links a:hover { border-color: var(--rose-deep); transform: translateY(-2px); }
.wx-links__icon { width: 30px; height: 30px; flex: none; color: var(--rose-deep); }
.wx-links__text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.wx-links__text span { font-size: .9rem; color: var(--charcoal-soft); }
.wx-links__text small { font-size: var(--fs-xs); color: var(--brown-muted); }
.wx-links__ext { width: 16px; height: 16px; flex: none; color: var(--brown-muted); }
.guide-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 2.2rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); font-size: .92rem; }
.guide-nav__label { color: var(--brown-muted); font-weight: 600; margin-right: 2px; }
.guide-nav a.guide-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: inherit; font-weight: 600; text-decoration: none; }
.guide-nav__link .icon { width: 16px; height: 16px; color: var(--rose-deep); }
.guide-nav a.guide-nav__link:hover { border-color: var(--rose-deep); }
.guide-nav a.guide-nav__book { margin-left: auto; font-weight: 700; color: var(--rose-deep); }
@media (max-width: 620px) { .guide-nav a.guide-nav__book { margin-left: 0; flex-basis: 100%; } }
.info-page ul.guide-items { margin: 1rem 0 2rem; padding: 0; list-style: none; }
.wx-links__text small.guide-items__meta { color: var(--rose-deep); font-weight: 600; }
.guide-upcoming { margin: 1.4rem 0 1rem; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.guide-upcoming li { display: grid; grid-template-columns: 3.6rem 1fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.guide-upcoming__date { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 12px; background: #fff; border: 1px solid var(--line); line-height: 1.1; }
.guide-upcoming__date small { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brown-muted); }
.guide-upcoming__date strong { font-size: 1.35rem; font-weight: 600; }
.guide-upcoming__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.guide-upcoming__title { font-weight: 600; line-height: 1.3; }
.guide-upcoming__meta { font-size: .88rem; color: var(--brown-muted); }
.guide-upcoming li.is-major .guide-upcoming__date { background: var(--rose-deep); border-color: var(--rose-deep); color: #fff; }
.guide-upcoming li.is-major .guide-upcoming__date small { color: #fff; }
.guide-upcoming a { color: inherit; text-decoration: none; }
.guide-upcoming a::after { content: ' ↗'; font-size: .8em; color: var(--brown-muted); }
.wx-links > li:only-child { max-width: 520px; }
.info-page .wx-links a:not(.btn) { text-decoration: none; }

/* Guides on wide screens. Text guides: the text at reading width, "In breve" and the useful links in a column beside it
   (the separate links band is then hidden). Card guides (places, events): the whole page width, cards three in a row. */
.guide__aside-links { display: none; }
@media (min-width: 1100px) {
  .guide .wrap.guide__grid { max-width: var(--wrap); }
  .guide:not(.guide--cards) .guide__grid { display: grid; grid-template-columns: minmax(0, 38rem) 370px; column-gap: 72px; justify-content: space-between; align-items: start; }
  .guide__grid > .guide-nav { grid-column: 1 / -1; }
  .guide:not(.guide--cards) .guide__aside { grid-column: 2; grid-row: 2; }
  .guide:not(.guide--cards) .guide__main { grid-column: 1; grid-row: 2; }
  .guide:not(.guide--cards) .guide__main > h2:first-child { margin-top: 0; }
  .guide__aside .rules-list { margin-top: 1rem; }
  .guide__aside-links { display: block; margin-top: 2.4rem; }
  .info-page .guide__aside-links h2 { margin: 0 0 .2em; }
  .guide__aside-links ul.wx-links { grid-template-columns: 1fr; gap: 10px; margin-top: .8rem; }
  .guide__aside-links .wx-links a { padding: 14px 16px; }
  .guide__links-band { display: none; }
  .guide--cards .rules-list { grid-template-columns: 1fr 1fr; }
  .guide--cards ul.guide-items { grid-template-columns: repeat(3, 1fr); }
  .guide--cards ul.guide-items:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
  .guide--cards .guide__main > p { max-width: 40rem; }
  .guide-upcoming-wrap.wrap--narrow { max-width: var(--wrap); }
  .guide-upcoming { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

/* Home: illustrations in the empty bands at the sides on wide screens, by season (partials/side-art.php) */
.home-body { position: relative; }
.side-art { display: none; }
@media (min-width: 1480px) {
  .side-art { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --gutter: calc((100vw - var(--wrap)) / 2); --w: min(230px, calc(var(--gutter) - 80px)); }
  .side-art__piece { position: absolute; width: var(--w); height: var(--w); overflow: visible; transform: rotate(var(--tilt)); animation: side-bob 7s ease-in-out infinite; }
  .side-art__piece--l { left: calc((var(--gutter) - var(--w)) / 2); }
  .side-art__piece--r { right: calc((var(--gutter) - var(--w)) / 2); }
  .side-art__piece--paraglider { animation: side-glide 11s ease-in-out infinite; }
  .side-art__drop { position: absolute; width: calc(22px * var(--s)); height: calc(22px * var(--s)); opacity: 0; animation: side-fall 10s linear infinite; }
  .side-art__drop--l { left: calc(var(--gutter) * var(--x)); }
  .side-art__drop--r { right: calc(var(--gutter) * var(--x)); }
  .side-art__wings { transform-box: fill-box; transform-origin: right center; animation: side-flap .45s ease-in-out infinite alternate; }
  .side-art__wings--r { transform-origin: left center; }
  .side-art__steam { animation: side-steam 3.5s ease-in-out infinite; }
}
@keyframes side-bob { 0%, 100% { transform: rotate(var(--tilt)) translateY(0); } 50% { transform: rotate(var(--tilt)) translateY(-7px); } }
@keyframes side-glide { 0%, 100% { transform: rotate(var(--tilt)) translate(0, 0); } 50% { transform: rotate(calc(var(--tilt) * -1)) translate(-14px, 18px); } }
@keyframes side-fall { 0% { transform: translate(0, -30px) rotate(0); opacity: 0; } 15%, 80% { opacity: .9; } 100% { transform: translate(26px, 240px) rotate(220deg); opacity: 0; } }
@keyframes side-flap { to { transform: scaleX(.5); } }
@keyframes side-steam { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
  .side-art__piece, .side-art__wings, .side-art__steam { animation: none; }
  .side-art__drop { animation: none; opacity: .7; }
}