:root {
  /* Superfici (60-30-10) */
  --canvas: #f5efe6;        /* L0 — 60% */
  --raised: #ebe2d4;        /* L1 — 30% */
  --raised-2: #fbf8f3;      /* L2 — form, overlay */
  --ink: #241d19;
  --ink-2: #6a5e55;
  --ink-3: #9a8d82;
  --accent: #a3412a;        /* unico accento: CTA, link, focus — 10% */
  --accent-press: #873420;
  --border: color-mix(in srgb, var(--ink) 10%, transparent);
  --border-strong: color-mix(in srgb, var(--ink) 18%, transparent);
  --shadow-soft: 0 1px 3px rgba(36, 29, 25, 0.06);
  --shadow-float: 0 12px 32px rgba(36, 29, 25, 0.07);

  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --hand: "Caveat", cursive;

  /* Motion tokens */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);
  --distance-micro: 4px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --distance-large: 30px;
  --scale-large: 0.96;
  --scale-medium: 0.97;
  --blur-small: 2px;
  --blur-medium: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* ---------- Striscia demo ---------- */
.demo-bar {
  background: var(--ink);
  color: #e9e1d6;
  font-size: 13px;
  text-align: center;
  padding: 8px 16px;
  line-height: 1.4;
}
.demo-bar a { color: #fff; text-underline-offset: 3px; }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--canvas);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-smooth-out);
}
.site-head.scrolled { border-bottom-color: var(--border); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.logo { text-decoration: none; display: flex; align-items: baseline; gap: 8px; }
.logo b { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 28px; letter-spacing: -0.02em; }
.logo span { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--ink-2); transition: color var(--duration-quick) var(--ease-out); }
.nav a:hover { color: var(--ink); }
.nav .nav-cta {
  color: #fff; background: var(--accent);
  padding: 10px 18px; border-radius: 999px; font-weight: 500;
  transition: background-color var(--duration-quick) var(--ease-out);
}
.nav .nav-cta:hover { background: var(--accent-press); color: #fff; }
@media (max-width: 760px) {
  .nav a:not(.nav-cta) { display: none; }
  .logo b { font-size: 24px; }
  .logo span { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding: 56px 0 40px; position: relative; }
.hero .wrap { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 0 56px; align-items: end; }
.hero-kicker { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 20px; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(50px, 8.2vw, 116px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
  font-variation-settings: "SOFT" 60, "opsz" 144;
}
.hero h1 em { font-style: italic; font-weight: 300; color: var(--accent); display: inline-block; margin-left: 0.7em; white-space: nowrap; }
.hero-text { max-width: 30em; margin: 36px 0 0; color: var(--ink-2); font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: #fff; text-decoration: none;
  border: 0; border-radius: 999px; padding: 15px 26px;
  font-weight: 500; font-size: 16px; cursor: pointer;
  transition: background-color var(--duration-quick) var(--ease-out), transform var(--duration-fast) var(--ease-smooth-out);
}
.btn:hover { background: var(--accent-press); }
.btn:active { transform: scale(0.98); }
.btn svg { transition: transform var(--duration-fast) var(--ease-smooth-out); }
.btn:hover svg { transform: translateX(var(--distance-micro)); }
.link-u { color: var(--ink); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 5px; transition: text-decoration-color var(--duration-quick) var(--ease-out); }
.link-u:hover { text-decoration-color: var(--accent); }

.hero-photo { position: relative; margin-bottom: -120px; z-index: 2; }
.hero-photo .frame { aspect-ratio: 4 / 5.3; overflow: hidden; border-radius: 2px; background: var(--raised); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo figcaption { font-size: 13px; color: var(--ink-2); margin-top: 10px; display: flex; gap: 10px; }
.hero-photo figcaption i { font-family: var(--serif); }
.hand {
  font-family: var(--hand); font-size: 26px; line-height: 1; color: var(--accent);
  position: absolute; white-space: nowrap;
}
.hero-photo .hand { right: calc(100% + 10px); top: 58%; transform: rotate(-7deg); text-align: right; }
.hero-photo .hand svg { margin: 4px 0 0 auto; }
.hero-photo .hand svg { display: block; }
.stamp {
  position: absolute; right: -14px; top: -28px;
  width: 112px; height: 112px; border-radius: 50%;
  background: var(--canvas); border: 1px solid var(--border-strong);
  display: grid; place-items: center; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.15;
  transform: rotate(9deg);
}
.stamp b { display: block; font-style: normal; font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; margin-top: 4px; color: var(--accent); }

@media (max-width: 860px) {
  .hero { padding-top: 32px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero h1 em { margin-left: 0.35em; }
  .hero-photo { margin: 84px 0 0 18%; }
  .hero-photo .hand { right: auto; left: -18%; top: -46px; font-size: 23px; transform: rotate(-4deg); }
  .hero-photo .hand svg { display: none; }
  .stamp { width: 92px; height: 92px; font-size: 13px; right: -6px; top: -22px; }
}

/* ---------- Banda "il salone" ---------- */
.salone { background: var(--raised); padding: 170px 0 110px; position: relative; }
.salone .wrap { display: grid; grid-template-columns: 0.42fr 1fr; gap: 64px; }
.label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.label::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.salone-photo { aspect-ratio: 3 / 4; overflow: hidden; margin-top: 8px; }
.salone-photo img { width: 100%; height: 100%; object-fit: cover; }
.lede { font-family: var(--serif); font-size: clamp(26px, 3.2vw, 40px); line-height: 1.22; letter-spacing: -0.015em; margin: 0 0 40px; font-weight: 360; max-width: 22em; }
.lede em { color: var(--accent); }
.steps { list-style: none; padding: 0; margin: 0; max-width: 680px; }
.steps li { display: grid; grid-template-columns: 76px 1fr; gap: 8px 20px; padding: 26px 0; border-top: 1px solid var(--border-strong); }
.steps li:nth-child(2) { margin-left: 7%; }
.steps li:nth-child(3) { margin-left: 14%; }
.steps .n { font-family: var(--serif); font-style: italic; font-size: 44px; line-height: 1; color: var(--ink-3); }
.steps h3 { font-family: var(--serif); font-weight: 450; font-size: 23px; margin: 0 0 4px; letter-spacing: -0.01em; }
.steps p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) {
  .salone { padding: 72px 0 72px; }
  .salone .wrap { grid-template-columns: 1fr; gap: 32px; }
  .salone-photo { aspect-ratio: 16 / 10; order: 2; }
  .steps li { grid-template-columns: 52px 1fr; }
  .steps li:nth-child(2), .steps li:nth-child(3) { margin-left: 0; }
  .steps .n { font-size: 34px; }
}

/* ---------- Listino ---------- */
.listino { padding: 120px 0 100px; }
.listino-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 56px; flex-wrap: wrap; }
.h2 { font-family: var(--serif); font-weight: 380; font-size: clamp(42px, 6vw, 80px); line-height: 0.98; letter-spacing: -0.03em; margin: 0; }
.h2 em { font-weight: 300; }
.listino-head p { max-width: 26em; color: var(--ink-2); margin: 0; }
.listino-body { display: grid; grid-template-columns: 1fr 380px; gap: 72px; align-items: start; }
.cat { margin-bottom: 52px; }
.cat-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; margin: 0 0 4px; }
.cat-title h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 30px; margin: 0; letter-spacing: -0.01em; }
.cat-title span { font-size: 13px; color: var(--ink-3); }
.svc {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline; gap: 14px;
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border);
  padding: 16px 0; text-align: left; cursor: pointer;
  transition: padding-left var(--duration-fast) var(--ease-smooth-out);
}
.svc .name { font-size: 18px; }
.svc .name small { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.svc .dots { border-bottom: 1px dotted var(--ink-3); transform: translateY(-5px); min-width: 20px; }
.svc .dur { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.svc .price { font-family: var(--serif); font-size: 21px; font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.svc .price i { font-size: 13px; font-style: normal; color: var(--ink-2); font-family: var(--sans); margin-right: 3px; }
.svc .add {
  grid-column: 1 / -1; font-size: 13px; color: var(--accent); height: 0; overflow: hidden; opacity: 0;
  transition: opacity var(--duration-quick) var(--ease-out);
}
.svc:hover, .svc:focus-visible { padding-left: 10px; }
.svc:hover .add, .svc:focus-visible .add { opacity: 1; }
.cat .note-hand { font-family: var(--hand); color: var(--accent); font-size: 22px; margin: 10px 0 0 6px; transform: rotate(-2deg); display: inline-block; }

.listino-aside { position: sticky; top: 100px; }
.peek { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--raised); }
.peek img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: blur(var(--blur-small)); transform: scale(1.02);
  transition: opacity var(--duration-fast) var(--ease-in-out), filter var(--duration-fast) var(--ease-in-out), transform var(--duration-slow) var(--ease-smooth-out);
}
.peek img.on { opacity: 1; filter: blur(0); transform: scale(1); }
.peek-cap { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); margin-top: 10px; }
.peek-cap i { font-family: var(--serif); color: var(--ink); }
.aside-box { margin-top: 28px; padding: 22px; background: var(--raised); border: 1px solid var(--border); border-radius: 4px; }
.aside-box p { margin: 0 0 14px; font-size: 15px; color: var(--ink-2); }
.aside-box strong { color: var(--ink); font-weight: 500; }

@media (max-width: 960px) {
  .listino { padding: 80px 0 60px; }
  .listino-body { grid-template-columns: 1fr; gap: 0; }
  .listino-aside { display: none; }
  .svc { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .svc .dots { display: none; }
  .svc .dur { grid-column: 1; grid-row: 2; }
  .svc .price { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .svc .add { display: none; }
}

/* ---------- Galleria a nastro ---------- */
.lavori { padding: 20px 0 110px; }
.lavori-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; }
.strip-ctrl { display: flex; gap: 8px; }
.round {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--canvas); display: grid; place-items: center; cursor: pointer;
  transition: border-color var(--duration-quick) var(--ease-out), background-color var(--duration-quick) var(--ease-out);
}
.round:hover { border-color: var(--ink); background: var(--raised-2); }
.strip {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(16px, (100vw - 1180px) / 2);
  padding: 0 max(16px, (100vw - 1180px) / 2) 18px; scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent;
  align-items: flex-start;
}
.strip figure { margin: 0; flex: none; scroll-snap-align: start; }
.strip figure:nth-child(odd) { margin-top: 42px; }
.strip .ph { overflow: hidden; background: var(--raised); }
.strip img { height: 100%; width: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-smooth-out); }
.strip figure:hover img { transform: scale(1.03); }
.strip .w1 .ph { width: 300px; height: 400px; }
.strip .w2 .ph { width: 420px; height: 300px; }
.strip .w3 .ph { width: 260px; height: 340px; }
.strip figcaption { display: flex; gap: 10px; font-size: 14px; margin-top: 12px; color: var(--ink-2); }
.strip figcaption b { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink); }
@media (max-width: 760px) {
  .lavori-head .strip-ctrl { display: none; }
  .strip .w1 .ph { width: 230px; height: 310px; }
  .strip .w2 .ph { width: 290px; height: 210px; }
  .strip .w3 .ph { width: 210px; height: 270px; }
  .strip figure:nth-child(odd) { margin-top: 28px; }
}

/* ---------- Prenotazione ---------- */
.prenota { background: var(--ink); color: #efe7dc; padding: 110px 0 120px; position: relative; }
.prenota .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; }
.prenota .label { color: #b9ab9d; }
.prenota .h2 { color: #f6efe5; }
.prenota .h2 em { color: #e48f72; }
.prenota-intro p { color: #c6b9ab; max-width: 24em; }
.prenota-intro .hand { position: static; display: inline-block; color: #e48f72; transform: rotate(-3deg); margin-top: 18px; }

.book {
  background: var(--raised-2); color: var(--ink);
  border-radius: 6px; padding: 36px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  position: relative; overflow: hidden;
}
.sentence { font-family: var(--serif); font-size: clamp(22px, 2.5vw, 30px); line-height: 1.75; letter-spacing: -0.01em; margin: 0; font-weight: 360; }
.slot-field {
  display: inline; border: 0; border-bottom: 1.5px solid var(--ink-3); background: transparent;
  font-family: var(--serif); font-style: italic; font-size: inherit; color: var(--accent);
  padding: 0 2px; border-radius: 0; outline: none;
  transition: border-color var(--duration-quick) var(--ease-out);
}
.slot-field:focus { border-bottom-color: var(--accent); }
.slot-field::placeholder { color: var(--ink-3); }
select.slot-field { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a3412a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; max-width: 100%; }
input.slot-field { width: 8.5em; }
input.slot-field.tel { width: 7.5em; }
.field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.pick { margin-top: 30px; }
.pick-title { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; }
.days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day {
  flex: none; width: 64px; padding: 10px 0 9px; text-align: center; cursor: pointer;
  background: var(--canvas); border: 1px solid var(--border); border-radius: 6px; line-height: 1.15;
  transition: border-color var(--duration-quick) var(--ease-out), background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}
.day small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.day b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 400; }
.day:hover { border-color: var(--border-strong); }
.day[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.day[aria-pressed="true"] small { color: #cfc3b6; }
.times { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.time {
  padding: 8px 14px; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer;
  background: var(--canvas); border: 1px solid var(--border); border-radius: 999px;
  transition: border-color var(--duration-quick) var(--ease-out), background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}
.time:hover:not(:disabled) { border-color: var(--border-strong); }
.time:disabled { color: var(--ink-3); text-decoration: line-through; cursor: not-allowed; background: transparent; }
.time[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.times.swap { animation: textSwap var(--duration-fast) var(--ease-in-out); }
@keyframes textSwap { from { opacity: 0; transform: translateY(var(--distance-micro)); filter: blur(var(--blur-small)); } }
.book-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.summary { font-size: 15px; color: var(--ink-2); margin: 0; }
.summary b { color: var(--ink); font-weight: 500; }
.err { color: var(--accent); font-size: 14px; margin: 10px 0 0; min-height: 1.4em; }

.done {
  position: absolute; inset: 0; background: var(--raised-2); padding: 36px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  opacity: 0; visibility: hidden; transform: scale(var(--scale-large));
  transition: opacity var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out), visibility 0s linear var(--duration-quick);
}
.done.show { opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out), visibility 0s; }
.check { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; margin-bottom: 22px; }
.done.show .check { animation: badgePop var(--duration-very-slow) var(--ease-bounce) both; }
.check path { stroke-dasharray: 30; stroke-dashoffset: 30; }
.done.show .check path { animation: draw var(--duration-very-slow) var(--ease-in-out) var(--duration-micro) forwards; }
@keyframes badgePop { from { opacity: 0; transform: translateY(var(--distance-large)) scale(0.6); filter: blur(8px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; margin: 0 0 12px; letter-spacing: -0.02em; }
.done p { color: var(--ink-2); margin: 0 0 24px; max-width: 30em; }

@media (max-width: 960px) {
  .prenota { padding: 80px 0; }
  .prenota .wrap { grid-template-columns: 1fr; gap: 36px; }
  .book { padding: 24px 20px; }
  .done { padding: 24px 20px; }
}

/* ---------- Orari ---------- */
.orari { padding: 110px 0 60px; }
.orari .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.hours { list-style: none; padding: 0; margin: 0; border: 1px solid var(--border); background: var(--raised); border-radius: 4px; }
.hours li { display: flex; justify-content: space-between; padding: 15px 22px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.hours li:last-child { border-bottom: 0; }
.hours li.closed { color: var(--ink-3); }
.hours li.today { font-weight: 600; }
.hours li.today span:first-child::after { content: "oggi"; font-family: var(--hand); font-weight: 400; color: var(--accent); font-size: 21px; margin-left: 10px; }
.orari-text p { color: var(--ink-2); max-width: 26em; }
.big-quote { font-family: var(--serif); font-style: italic; font-weight: 340; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 22px; }
@media (max-width: 860px) {
  .orari { padding: 72px 0 40px; }
  .orari .wrap { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Footer ---------- */
.foot { padding: 40px 0 0; overflow: hidden; }
.foot-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.foot-row a { color: var(--ink-2); }
.wordmark {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(110px, 25vw, 360px); line-height: 0.75; letter-spacing: -0.05em;
  margin: 26px 0 0 -0.04em; color: var(--raised); white-space: nowrap;
  -webkit-text-stroke: 1px var(--border-strong);
}

/* ---------- Comparse allo scroll ---------- */
.rv { opacity: 0; transform: translateY(var(--distance-medium)); filter: blur(var(--blur-medium));
  transition: opacity var(--duration-very-slow) var(--ease-in-out), transform var(--duration-very-slow) var(--ease-smooth-out), filter var(--duration-very-slow) var(--ease-in-out);
  transition-delay: calc(var(--i, 0) * var(--duration-stagger)); }
.rv.in { opacity: 1; transform: none; filter: none; }
.no-js .rv { opacity: 1; transform: none; filter: none; }

.hero-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-line > span { display: inline-block; transform: translateY(105%); transition: transform 900ms var(--ease-smooth-out); transition-delay: calc(var(--i, 0) * 120ms); }
.loaded .hero-line > span { transform: none; }
.hero-photo .frame img { transform: scale(1.08); transition: transform 1400ms var(--ease-smooth-out); }
.loaded .hero-photo .frame img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .rv, .hero-line > span, .hero-photo .frame img { opacity: 1; transform: none; filter: none; }
}