/* Seções da página inicial e da página Nossa história. */
:root {
  --wall: #efe9e0;
  --mat: #fbf8f2;
  --kraft: #cfae84;
  --kraft-ink: #3b2c1f;
  --brass: #a3825d;
  --bronze: #8a6a50;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Cabeçalho: flor da logo ao lado do nome */
.wordmark-flower { width: 66px; height: 66px; object-fit: contain; margin: -4px -2px 0 -6px; }
.wordmark small { letter-spacing: .16em; }
.desktop-nav a[aria-current="page"] { color: #7b5539; }
.mobile-nav a[aria-current="page"] { font-weight: 600; }

/* Faixa da inauguração */
.launch-strip { background: var(--olive-dark); color: var(--cream); }
.launch-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 34px;
  padding: 14px 0;
  text-align: center;
}
.launch-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: #e3cfae; }
.launch-date { font: 21px/1.3 var(--serif); color: #fff7eb; }
.launch-invite { display: inline-flex; align-items: center; gap: 10px; font: italic 21px/1.3 var(--serif); color: #f0e3cf; }
.launch-invite svg { width: 18px; height: 18px; color: #e3cfae; }
.launch-inner > * + *::before { content: ''; display: inline-block; vertical-align: middle; width: 1px; height: 20px; margin-right: 34px; background: #ffffff33; }

/* 01 Nosso espaço: parede de quadros */
.space-section { background: var(--wall); padding: 88px 0 104px; }
.space-section .section-aside { font-size: 16px; }
.space-wall {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-areas: "a b c" "d b e";
  column-gap: clamp(32px, 4.5vw, 64px);
  row-gap: 70px;
  align-items: center;
  margin-top: 30px;
  padding-bottom: 22px;
}
.frame { position: relative; margin: 0; rotate: var(--tilt, 0deg); transition: rotate 550ms cubic-bezier(.2, .7, .3, 1); }
.frame-01 { grid-area: a; --tilt: -1.6deg; --moldura: url(/assets/moldura-quadrada.webp); width: 84%; justify-self: end; align-self: end; }
.frame-02 { grid-area: b; --tilt: .6deg; --moldura: url(/assets/moldura-retrato.webp); }
.frame-03 { grid-area: c; --tilt: 1.3deg; --moldura: url(/assets/moldura-retrato-2.webp); width: 90%; align-self: end; }
.frame-04 { grid-area: d; --tilt: -.8deg; --moldura: url(/assets/moldura-paisagem.webp); align-self: start; }
.frame-05 { grid-area: e; --tilt: 1.7deg; --moldura: url(/assets/moldura-retrato.webp); width: 82%; justify-self: center; align-self: start; }
/* Moldura de madeira (scripts/moldura.mjs): uma imagem inteira por formato, sem emendas.
   A madeira ocupa 7% da largura da imagem; o padding em % usa a mesma largura. */
.frame-open {
  display: block;
  width: 100%;
  padding: 7%;
  background: var(--moldura, url(/assets/moldura-retrato.webp)) 0 0 / 100% 100% no-repeat;
  box-shadow: 0 26px 36px -24px #2b1d0f94, 0 5px 12px -6px #2b1d0f66;
  text-align: left;
  cursor: zoom-in;
  transition: box-shadow 400ms ease;
}
.frame-mat {
  display: block;
  padding: clamp(12px, 1.9vw, 26px);
  background: var(--mat);
  box-shadow: inset 3px 3px 6px #2b170952, inset -1px -1px 2px #2b17091a;
}
.frame-main .frame-mat { padding: clamp(16px, 2.6vw, 36px); }
.frame-mat img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 0 0 1px #e4dccd, 0 0 0 3px #fffdf8, 0 0 0 4px #d9cfbd; background: #e3ddd2; }
.frame-square img { aspect-ratio: 1; }
.frame-wide img { aspect-ratio: 4 / 3; object-position: 50% 74%; }
.frame-tag {
  position: absolute;
  left: 24px;
  bottom: -20px;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 18px 9px 30px;
  background: var(--kraft);
  color: var(--kraft-ink);
  font: 17px/1.2 var(--serif);
  clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%);
  white-space: nowrap;
  rotate: -2.5deg;
}
.frame-tag::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--wall);
  box-shadow: inset 0 1px 1px #00000059;
}
.frame-tag small { font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.frame-03 .frame-tag, .frame-04 .frame-tag { left: auto; right: 18px; rotate: 2deg; }
.space-extra {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 70px clamp(32px, 4.5vw, 64px);
  margin-top: 90px;
}
.frame-extra:nth-child(3n + 1) { --tilt: -1deg; --moldura: url(/assets/moldura-retrato-2.webp); }
.frame-extra:nth-child(3n + 2) { --tilt: .8deg; }
.frame-extra:nth-child(3n) { --tilt: -.5deg; }
/* Vídeo em pé dentro de um celular com a proporção dos aparelhos atuais (9:19,5), apoiado numa faixa verde
   com o contexto ao lado. O vídeo 9:16 preenche a tela com um leve corte nas laterais (object-fit: cover). */
.space-film {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(40px, 7vw, 110px);
  margin-top: 240px;
  scroll-margin-top: 130px;
  padding: 56px clamp(32px, 6vw, 96px);
  background: var(--olive-dark);
  color: var(--cream);
}
.film-copy { max-width: 470px; }
.film-copy .eyebrow { margin-bottom: 16px; color: #e3cfae; }
.film-copy h3 { font-size: 44px; color: #fff7eb; }
.film-copy > p { margin-top: 18px; color: #e7dfcf; font-size: 17px; line-height: 1.8; }
.film-cta { margin-top: 30px; border-color: #e3cfae80; color: var(--cream); background: transparent; }
.film-cta:hover { background: #ffffff14; }
.phone { position: relative; align-self: start; width: 290px; margin: -170px 0 -110px; padding: 10px; border-radius: 48px; background: linear-gradient(150deg, #2c2c28, #0e0e0c 60%); box-shadow: inset 0 0 0 1.5px #4b4b45, 0 0 0 1px #00000080, 0 46px 60px -34px #12160fb3; }
.phone::before { content: ''; position: absolute; z-index: 2; top: 21px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: 99px; background: #050505; }
.phone-screen { position: relative; display: flex; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 39px; color: var(--cream); background: linear-gradient(180deg, #1d241bb3, #1d241be0), url(/assets/espaco/parede-verde-640.webp) center / cover; }
.phone-screen video, .phone-screen iframe { width: 100%; height: 100%; border: 0; object-fit: cover; background: #111; cursor: pointer; }
.phone-screen .video-empty > small { color: #e3d6c2; }
.phone-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity 400ms ease; }
.phone-cover.is-hidden { opacity: 0; }
.phone-sound { position: absolute; right: 14px; bottom: 16px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #1d241bb3; color: var(--cream); }
.phone-sound:hover { background: #1d241be6; }

/* 02 Como funciona */
.concept-section { padding: 104px 0 64px; }
.concept-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(48px, 7vw, 104px); align-items: start; }
.concept-intro h2 { max-width: 460px; }
.concept-intro h2 em { color: var(--bronze); }
.concept-lead { margin-top: 26px; max-width: 400px; font-size: 18px; line-height: 1.75; color: var(--muted); }
.concept-motto { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; font-size: 12px; text-transform: uppercase; letter-spacing: .2em; color: var(--olive-dark); }
.concept-motto span + span::before { content: '•'; margin-right: 12px; color: var(--brass); }
.concept-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.concept-list li { padding: 34px 32px 38px 0; border-bottom: 1px solid var(--line); }
.concept-list li:nth-child(even) { padding: 34px 0 38px 32px; border-left: 1px solid var(--line); }
.concept-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--olive); color: var(--cream); margin-bottom: 24px; }
.concept-icon svg { width: 26px; height: 26px; }
.concept-list h3 { font-size: 25px; }
.concept-list p { margin-top: 10px; font-size: 16px; line-height: 1.7; color: var(--muted); }

/* Pergunta frequente: fechada por padrão para não pesar a página */
.faq { margin-top: 72px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none; }
.faq-summary::-webkit-details-marker { display: none; }
.faq-text { display: flex; flex-direction: column; gap: 8px; }
.faq-kicker { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--bronze); }
.faq-question { font: 26px/1.3 var(--serif); }
.faq-toggle { position: relative; flex-shrink: 0; width: 48px; height: 48px; border: 1px solid #c9cbbd; border-radius: 50%; transition: background 250ms ease, border-color 250ms ease; }
.faq-toggle::before, .faq-toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin: -.75px 0 0 -8px; background: var(--ink); transition: transform 300ms ease; }
.faq-toggle::after { transform: rotate(90deg); }
.faq-summary:hover .faq-toggle { background: #eef0e6; }
.faq[open] .faq-toggle { background: var(--olive-dark); border-color: var(--olive-dark); }
.faq[open] .faq-toggle::before, .faq[open] .faq-toggle::after { background: var(--cream); }
.faq[open] .faq-toggle::after { transform: rotate(0deg); }
.faq-answer { display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); padding: 6px 0 46px; }
.faq-no { font: 84px/.9 var(--serif); letter-spacing: -.03em; color: var(--olive-dark); }
.faq-body p { font-size: 16px; line-height: 1.8; color: var(--muted); }
.faq-body p + p { margin-top: 14px; }
.faq-body .faq-lead { font: 22px/1.5 var(--serif); color: var(--ink); }
.faq-body h3 { margin: 30px 0 4px; font: 600 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .18em; color: var(--bronze); }
.faq-sources { list-style: none; margin: 0; padding: 0; }
.faq-sources li { position: relative; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line); font-size: 16px; }
.faq-sources li::before { content: ''; position: absolute; left: 0; top: 50%; width: 12px; height: 1px; background: var(--brass); }
.faq-body .faq-sign { margin-top: 26px; font: italic 20px/1.5 var(--serif); color: var(--olive-dark); }

/* 03 Visite: endereço e horário */
.visit-card { padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); background: #fff; }
.visit-details > .visit-address { margin-top: 20px; font: 28px/1.3 var(--serif); overflow-wrap: break-word; }
.visit-hours { background: var(--wall); border-color: #e2dacd; }
.visit-hours h3, .visit-details h3 { font-size: 30px; }
.visit-contact { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 32px; margin-top: 24px; padding: 24px clamp(24px, 4vw, 48px); border: 1px solid var(--line); }
.visit-contact > p { font: 22px/1.3 var(--serif); }
.visit-contact-links { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-link { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 20px 8px 12px; border: 1px solid #cfd2c4; border-radius: 999px; transition: background 200ms ease, border-color 200ms ease; }
.contact-link:hover { background: #eef0e6; border-color: var(--olive); }
.contact-link svg { width: 30px; height: 30px; color: var(--olive-dark); }
.contact-link .whats-icon { color: var(--olive-dark); }
.contact-link > span { display: flex; flex-direction: column; font-size: 15px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.contact-link small { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }

/* Botão flutuante de WhatsApp com um vestidinho no lugar do telefone */
.whats-float { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 10px; color: var(--cream); border-radius: 999px; }
/* O círculo fica num span: no Safari do iPhone a sombra de um <svg> sai quadrada. */
.whats-float .whats-bubble { display: grid; place-items: center; width: 60px; height: 60px; padding: 11px; border: 2px solid #f4e6d2d9; border-radius: 50%; background: var(--olive-dark); box-shadow: 0 10px 24px -8px #1d241a99, 0 3px 8px #1d241a40; transition: transform 250ms ease, background 250ms ease; }
.whats-float .whats-icon { width: 100%; height: 100%; }
.whats-label { padding: 9px 15px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 500; white-space: nowrap; box-shadow: 0 6px 18px -6px #2a301f59; opacity: 0; translate: 8px 0; transition: opacity 250ms ease, translate 250ms ease; pointer-events: none; }
.hours { margin: 22px 0 0; }
.hours > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 18px 0; border-bottom: 1px solid #d9d0c1; }
.hours dt { font-size: 16px; font-weight: 500; }
.hours dd { margin: 0; text-align: right; font: 22px/1.35 var(--serif); }

/* Rodapé: endereço, horário e aviso */
.footer-wordmark { display: flex; align-items: center; gap: 14px; }
.footer-wordmark img { width: 70px; height: 70px; object-fit: contain; margin: -8px -4px 0 -8px; }
.footer-wordmark small { letter-spacing: .16em; text-transform: uppercase; }
.footer-info { display: grid; grid-template-columns: .9fr 1fr 1.05fr 1.2fr; gap: 32px; padding: 34px 0 40px; border-top: 1px solid #606952; }
.footer-label { margin-bottom: 12px; font: 600 11px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .16em; color: #c4b993; }
.footer-info p { font-size: 15px; line-height: 1.75; color: #e6e1d3; }
.footer-info a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; overflow-wrap: anywhere; }
.footer-info a:hover { color: #fff; }

/* Página Nossa história */
.page-hero { position: relative; overflow: hidden; background: #686b59; color: var(--cream); padding: 96px 0 92px; }
.page-hero-inner { position: relative; z-index: 1; }
.page-hero h1 { font-size: 80px; line-height: 1.06; max-width: 700px; }
.page-flower { position: absolute; right: 3%; top: -70px; width: 520px; height: auto; max-width: none; pointer-events: none; transform-origin: 20% 72%; }
.page-hero + .story-section { padding: 90px 0; }
.story-next { padding: 92px 0 100px; text-align: center; }
.story-next h2 { font-size: 44px; }
.story-next-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.button-line { border-color: var(--olive-dark); color: var(--ink); }
.button-line:hover { background: #eef0e6; }

/* Tablet: textos agrupados como no celular, em vez de soltos nas laterais */
@media (min-width: 761px) and (max-width: 1280px) {
  .space-section .section-top { display: block; }
  .space-section .section-aside { margin-top: 18px; max-width: 540px; font-size: 17px; }
  .space-section .section-aside br { display: none; }
  .frame-tag { padding: 8px 15px 8px 27px; font-size: 15px; }
}
@media (min-width: 1001px) and (max-width: 1280px) {
  .frame-03 .frame-tag small, .frame-05 .frame-tag small { display: none; }
}

@media (max-width: 920px) {
  .desktop-nav { display: none; }
  .site-header .menu-toggle { display: inline-flex; }
}

@media (max-width: 1000px) {
  .space-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a a" "b b" "c e" "d d"; row-gap: 64px; column-gap: 24px; }
  .frame-01 { width: min(66%, 320px); justify-self: center; }
  .frame-02 { width: min(100%, 520px); justify-self: center; }
  .frame-03, .frame-05 { width: 100%; align-self: start; }
  .frame-04 { width: min(100%, 560px); justify-self: center; }
  .space-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; }
  .space-film { gap: 40px; padding: 48px 40px; }
  .phone { width: 250px; margin: -150px 0 -96px; }
  .film-copy h3 { font-size: 38px; }
  .concept-layout { grid-template-columns: 1fr; }
  .faq-answer { grid-template-columns: 1fr; gap: 18px; }
  .footer-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .wordmark-flower { width: 54px; height: 54px; margin-left: -4px; }
  .launch-inner { flex-direction: column; gap: 4px; min-height: 0; padding: 18px 0 20px; }
  .launch-inner > * + *::before { display: none; }
  .launch-label { font-size: 12px; }
  .launch-date, .launch-invite { font-size: 20px; }
  .space-section { padding: 56px 0 70px; }
  .space-wall { margin-top: 10px; row-gap: 52px; column-gap: 16px; }
  .frame-01 { width: 72%; }
  .frame-mat { padding: 10px; }
  .frame-main .frame-mat { padding: 16px; }
  .frame-tag { left: 12px; bottom: -17px; padding: 7px 12px 7px 26px; font-size: 15px; gap: 8px; }
  .frame-tag small { font-size: 9px; }
  .frame-03 .frame-tag, .frame-04 .frame-tag { right: 10px; }
  .frame-03 .frame-tag, .frame-05 .frame-tag { font-size: 14px; }
  .frame-03 .frame-tag small, .frame-05 .frame-tag small { display: none; }
  .frame-03 .frame-tag { right: 2px; font-size: 13px; white-space: nowrap; }
  .space-film { grid-template-columns: 1fr; gap: 0; margin: 250px -20px 0; padding: 0 24px 44px; scroll-margin-top: 210px; }
  .phone { order: -1; justify-self: center; align-self: auto; width: 230px; margin: -200px 0 30px; border-radius: 40px; padding: 9px; }
  .phone::before { top: 17px; width: 66px; height: 19px; margin-left: -33px; }
  .phone-screen { border-radius: 32px; }
  .film-copy h3 { font-size: 31px; }
  .film-cta { width: 100%; }
  .film-copy h3 br { display: none; }
  .concept-section { padding: 60px 0 64px; }
  .concept-layout { gap: 36px; }
  .concept-lead { font-size: 17px; margin-top: 20px; }
  .concept-motto { margin-top: 26px; font-size: 11px; }
  .concept-list { grid-template-columns: 1fr; }
  .concept-list li, .concept-list li:nth-child(even) { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 18px; padding: 24px 0; border-left: 0; }
  .concept-icon { grid-row: span 2; width: 50px; height: 50px; margin: 2px 0 0; }
  .concept-icon svg { width: 22px; height: 22px; }
  .concept-list h3 { font-size: 22px; }
  .concept-list p { margin-top: 6px; }
  .faq { margin-top: 44px; }
  .faq-summary { padding: 20px 0; gap: 16px; }
  .faq-kicker { font-size: 11px; }
  .faq-question { font-size: 21px; }
  .faq-toggle { width: 44px; height: 44px; }
  .faq-no { font-size: 62px; }
  .faq-body .faq-lead { font-size: 20px; }
  .faq-answer { padding-bottom: 34px; }
  .visit-contact { padding: 22px 24px 24px; }
  .visit-contact > p { font-size: 21px; }
  .visit-contact-links, .contact-link { width: 100%; }
  .whats-float .whats-bubble { width: 56px; height: 56px; padding: 10px; }
  .whats-label { display: none; }
  .visit-card { padding: 28px 24px 30px; }
  .visit-details > .visit-address { font-size: 24px; }
  .visit-hours h3, .visit-details h3 { font-size: 28px; }
  .visit-hours h3 br { display: none; }
  .hours dd { font-size: 20px; }
  .footer-wordmark img { width: 58px; height: 58px; }
  .footer-info { grid-template-columns: 1fr; gap: 24px; padding: 28px 0 30px; }
  .page-hero { padding: 54px 0 190px; }
  .page-hero h1 { font-size: 50px; }
  .page-flower { width: 270px; top: auto; right: -36px; bottom: -58px; }
  .page-hero + .story-section { padding: 48px 0 56px; }
  .story-next { padding: 60px 0 66px; }
  .story-next h2 { font-size: 34px; }
  .story-next-actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 360px) {
  .frame-tag { font-size: 14px; }
}

@media (hover: hover) and (pointer: fine) {
  .whats-float:hover .whats-label, .whats-float:focus-visible .whats-label { opacity: 1; translate: 0 0; }
  .whats-float:hover .whats-bubble { transform: translateY(-3px); background: var(--olive); }
  .frame:hover { rotate: 0deg; }
  .frame:hover .frame-open { box-shadow: 0 32px 44px -26px #2b1d0fa6, 0 7px 14px -8px #2b1d0f73; }
}
.frame:focus-within { rotate: 0deg; }

/* Abertura da home (intro.js): tela verde com a logo e pétalas caindo; a tela sobe e revela o site. */
.intro { position: fixed; inset: 0; z-index: 95; display: none; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 50% 44%, #5a6453 0, #45503f 36%, #353f31 72%, #2c3429 100%);
  animation: intro-out .9s cubic-bezier(.76, 0, .24, 1) 2.5s forwards; }
html.intro-on .intro { display: block; }
html.intro-on body { overflow: hidden; }
.intro.is-leaving { animation: intro-leave .7s cubic-bezier(.76, 0, .24, 1) forwards; }
.intro-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; }
.intro-logo { width: min(500px, 76vw); height: auto; opacity: 0; filter: drop-shadow(0 18px 30px #12160f66);
  animation: intro-logo 1.2s cubic-bezier(.2, .7, .3, 1) .15s forwards; }
.intro-line { width: min(160px, 40vw); height: 1px; background: #e3cfae33; overflow: hidden; position: relative; }
.intro-line::after { content: ''; position: absolute; inset: 0; background: #e3cfae; transform: scaleX(0); transform-origin: left;
  animation: intro-line 2.2s cubic-bezier(.4, 0, .2, 1) .3s forwards; }
.intro-petals span { position: absolute; top: 0; left: var(--x); width: var(--s); height: var(--s);
  background: url(/assets/petala.webp) center / contain no-repeat; opacity: 0;
  animation: intro-petal var(--t) linear var(--d) infinite; will-change: transform, opacity; }
.intro-petals span:nth-child(1) { --x: 92.3%; --t: 4.63s; --d: -1.42s; --s: 36px; --o: 0.95; --drift: 97px; --r0: 21deg; }
.intro-petals span:nth-child(2) { --x: 11.3%; --t: 8.54s; --d: -5.3s; --s: 16px; --o: 0.45; --drift: -43px; --r0: -49deg; }
.intro-petals span:nth-child(3) { --x: 98.1%; --t: 7.43s; --d: -5.46s; --s: 22px; --o: 0.75; --drift: 37px; --r0: -18deg; }
.intro-petals span:nth-child(4) { --x: 77.9%; --t: 6.61s; --d: -1.43s; --s: 30px; --o: 0.75; --drift: 102px; --r0: 24deg; }
.intro-petals span:nth-child(5) { --x: 96.8%; --t: 10.22s; --d: -8.32s; --s: 16px; --o: 0.45; --drift: -91px; --r0: 44deg; }
.intro-petals span:nth-child(6) { --x: 66.9%; --t: 10.1s; --d: -6.8s; --s: 14px; --o: 0.45; --drift: -104px; --r0: -41deg; }
.intro-petals span:nth-child(7) { --x: 6.4%; --t: 6.86s; --d: -3.93s; --s: 30px; --o: 0.75; --drift: 43px; --r0: 24deg; }
.intro-petals span:nth-child(8) { --x: 89.8%; --t: 7.52s; --d: -1.94s; --s: 26px; --o: 0.75; --drift: -109px; --r0: -40deg; }
.intro-petals span:nth-child(9) { --x: 70.1%; --t: 5.13s; --d: -0.73s; --s: 36px; --o: 0.95; --drift: -79px; --r0: -28deg; }
.intro-petals span:nth-child(10) { --x: 43.8%; --t: 9.75s; --d: -0.23s; --s: 18px; --o: 0.45; --drift: -117px; --r0: -67deg; }
.intro-petals span:nth-child(11) { --x: 97.3%; --t: 5.46s; --d: -5.4s; --s: 36px; --o: 0.95; --drift: -74px; --r0: -66deg; }
.intro-petals span:nth-child(12) { --x: 97.4%; --t: 8.61s; --d: -2.28s; --s: 14px; --o: 0.45; --drift: -88px; --r0: 5deg; }
.intro-petals span:nth-child(13) { --x: 20.0%; --t: 10.45s; --d: -7.22s; --s: 18px; --o: 0.45; --drift: -62px; --r0: -45deg; }
.intro-petals span:nth-child(14) { --x: 41.0%; --t: 5.82s; --d: -3.82s; --s: 40px; --o: 0.95; --drift: 51px; --r0: 35deg; }
.intro-petals span:nth-child(15) { --x: 5.1%; --t: 5.79s; --d: -3.16s; --s: 46px; --o: 0.95; --drift: 82px; --r0: 6deg; }
.intro-petals span:nth-child(16) { --x: 76.7%; --t: 6.32s; --d: -1.8s; --s: 30px; --o: 0.75; --drift: -110px; --r0: -35deg; }
.intro-petals span:nth-child(17) { --x: 31.9%; --t: 6.8s; --d: -6.47s; --s: 26px; --o: 0.75; --drift: -73px; --r0: 68deg; }
.intro-petals span:nth-child(18) { --x: 9.6%; --t: 5.88s; --d: -5.81s; --s: 40px; --o: 0.95; --drift: 30px; --r0: 16deg; }
.intro-petals span:nth-child(19) { --x: 36.5%; --t: 8.0s; --d: -3.21s; --s: 22px; --o: 0.75; --drift: -52px; --r0: 45deg; }
.intro-petals span:nth-child(20) { --x: 74.1%; --t: 5.72s; --d: -2.75s; --s: 40px; --o: 0.95; --drift: -97px; --r0: 66deg; }
.intro-petals span:nth-child(21) { --x: 28.4%; --t: 4.96s; --d: -0.31s; --s: 36px; --o: 0.95; --drift: 78px; --r0: -66deg; }
.intro-petals span:nth-child(22) { --x: 66.7%; --t: 7.83s; --d: -3.19s; --s: 26px; --o: 0.75; --drift: 65px; --r0: 17deg; }
.intro-petals span:nth-child(23) { --x: 14.4%; --t: 9.93s; --d: -5.5s; --s: 18px; --o: 0.45; --drift: 98px; --r0: 1deg; }
.intro-petals span:nth-child(24) { --x: 68.5%; --t: 11.46s; --d: -1.68s; --s: 16px; --o: 0.45; --drift: 44px; --r0: 48deg; }
.intro-petals span:nth-child(25) { --x: 99.0%; --t: 8.52s; --d: -0.32s; --s: 16px; --o: 0.45; --drift: -61px; --r0: 50deg; }
.intro-petals span:nth-child(26) { --x: 2.4%; --t: 4.92s; --d: -2.78s; --s: 40px; --o: 0.95; --drift: -53px; --r0: 60deg; }
.intro-petals span:nth-child(27) { --x: 38.4%; --t: 8.57s; --d: -5.35s; --s: 26px; --o: 0.75; --drift: -35px; --r0: -40deg; }
.intro-petals span:nth-child(28) { --x: 91.0%; --t: 8.91s; --d: -6.09s; --s: 14px; --o: 0.45; --drift: 90px; --r0: 5deg; }
.intro-petals span:nth-child(29) { --x: 56.1%; --t: 7.65s; --d: -4.52s; --s: 22px; --o: 0.75; --drift: 33px; --r0: -36deg; }
.intro-petals span:nth-child(30) { --x: 33.8%; --t: 9.12s; --d: -3.89s; --s: 14px; --o: 0.45; --drift: 109px; --r0: -14deg; }
.intro-petals span:nth-child(31) { --x: 52.4%; --t: 5.66s; --d: -3.01s; --s: 40px; --o: 0.95; --drift: -101px; --r0: 9deg; }
.intro-petals span:nth-child(32) { --x: 44.6%; --t: 6.51s; --d: -2.47s; --s: 30px; --o: 0.75; --drift: 35px; --r0: 55deg; }
.intro-petals span:nth-child(33) { --x: 38.3%; --t: 7.48s; --d: -1.57s; --s: 30px; --o: 0.75; --drift: 84px; --r0: -56deg; }
.intro-petals span:nth-child(34) { --x: 2.1%; --t: 8.18s; --d: -4.82s; --s: 26px; --o: 0.75; --drift: 76px; --r0: -8deg; }
.intro-petals span:nth-child(35) { --x: 95.4%; --t: 9.84s; --d: -1.7s; --s: 16px; --o: 0.45; --drift: 103px; --r0: 57deg; }
.intro-petals span:nth-child(36) { --x: 96.7%; --t: 7.72s; --d: -6.28s; --s: 30px; --o: 0.75; --drift: -86px; --r0: -22deg; }
.intro-petals span:nth-child(37) { --x: 65.4%; --t: 7.3s; --d: -0.02s; --s: 22px; --o: 0.75; --drift: 62px; --r0: -56deg; }
.intro-petals span:nth-child(38) { --x: 73.2%; --t: 8.54s; --d: -6.32s; --s: 26px; --o: 0.75; --drift: 51px; --r0: -34deg; }
.intro-petals span:nth-child(39) { --x: 59.4%; --t: 10.93s; --d: -5.07s; --s: 18px; --o: 0.45; --drift: -38px; --r0: 38deg; }
.intro-petals span:nth-child(40) { --x: 46.3%; --t: 10.9s; --d: -1.28s; --s: 18px; --o: 0.45; --drift: -96px; --r0: -17deg; }
.intro-petals span:nth-child(41) { --x: 52.2%; --t: 10.85s; --d: -3.39s; --s: 16px; --o: 0.45; --drift: 85px; --r0: 56deg; }
.intro-petals span:nth-child(42) { --x: 91.0%; --t: 5.07s; --d: -4.88s; --s: 46px; --o: 0.95; --drift: -58px; --r0: -31deg; }
.intro-petals span:nth-child(43) { --x: 4.5%; --t: 7.8s; --d: -0.88s; --s: 22px; --o: 0.75; --drift: 62px; --r0: -42deg; }
.intro-petals span:nth-child(44) { --x: 95.4%; --t: 8.51s; --d: -0.29s; --s: 22px; --o: 0.75; --drift: 110px; --r0: -61deg; }
.intro-petals span:nth-child(45) { --x: 50.2%; --t: 9.77s; --d: -6.21s; --s: 18px; --o: 0.45; --drift: -55px; --r0: -52deg; }
.intro-petals span:nth-child(46) { --x: 65.0%; --t: 9.97s; --d: -7.34s; --s: 14px; --o: 0.45; --drift: -63px; --r0: -70deg; }
.intro-petals span:nth-child(47) { --x: 59.2%; --t: 10.21s; --d: -5.84s; --s: 14px; --o: 0.45; --drift: -111px; --r0: -66deg; }
.intro-petals span:nth-child(48) { --x: 12.2%; --t: 7.75s; --d: -7.29s; --s: 26px; --o: 0.75; --drift: 31px; --r0: 57deg; }
.intro-petals span:nth-child(49) { --x: 6.3%; --t: 10.65s; --d: -0.37s; --s: 18px; --o: 0.45; --drift: -56px; --r0: 8deg; }
.intro-petals span:nth-child(50) { --x: 80.0%; --t: 6.58s; --d: -5.4s; --s: 22px; --o: 0.75; --drift: -108px; --r0: 39deg; }
.intro-petals span:nth-child(51) { --x: 74.7%; --t: 10.07s; --d: -5.41s; --s: 14px; --o: 0.45; --drift: -38px; --r0: -2deg; }
.intro-petals span:nth-child(52) { --x: 65.0%; --t: 10.65s; --d: -10.14s; --s: 18px; --o: 0.45; --drift: -44px; --r0: 60deg; }
.intro-petals span:nth-child(53) { --x: 41.9%; --t: 10.0s; --d: -9.84s; --s: 18px; --o: 0.45; --drift: -61px; --r0: -33deg; }
.intro-petals span:nth-child(54) { --x: 35.7%; --t: 4.95s; --d: -2.77s; --s: 40px; --o: 0.95; --drift: -72px; --r0: -61deg; }
@keyframes intro-out { to { transform: translateY(-100%); } }
@keyframes intro-leave { from { transform: none; } to { transform: translateY(-100%); } }
@keyframes intro-logo { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes intro-line { to { transform: scaleX(1); } }
@keyframes intro-petal {
  0% { transform: translate3d(0, -12vh, 0) rotate(var(--r0)); opacity: 0; }
  8% { opacity: var(--o, .9); }
  50% { transform: translate3d(calc(var(--drift) * .55), 46vh, 0) rotate(calc(var(--r0) + 130deg)); }
  90% { opacity: calc(var(--o, .9) * .9); }
  100% { transform: translate3d(var(--drift), 112vh, 0) rotate(calc(var(--r0) + 270deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } }