/* ============================================================
   Acquarelli Bonfanti — entry page styles
   ============================================================ */

/* ── Stage ─────────────────────────────────────────────── */
.stage{
  position:relative;width:100vw;min-height:100vh;overflow:hidden;
  background:
    radial-gradient(120% 60% at 50% 0%,   oklch(96% 0.018 290 / .55) 0%, transparent 60%),
    radial-gradient(120% 80% at 50% 110%, oklch(96% 0.018 240 / .45) 0%, transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  display:flex;flex-direction:column;
}

/* ── Crown title (top overlay) ─────────────────────────── */
.crown{
  position:relative;z-index:30;text-align:center;
  padding:clamp(22px, 3.4vh, 44px) 24px clamp(10px, 1.4vh, 18px);
  pointer-events:none;
  flex:0 0 auto;
}
.crown-inner{
  display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:auto;
}
.crown-eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:"Inter",sans-serif;font-weight:400;font-size:11px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft);
  opacity:.65;
}
.crown-eyebrow .line{width:48px;height:1px;background:currentColor;display:inline-block;opacity:.5}
.crown-title{
  margin:0;line-height:1.15;color:var(--ink);
  font-family:"Cormorant Garamond", serif;font-weight:500;
  font-size:clamp(30px, 4vw, 58px);
  letter-spacing:.005em;
  display:inline-flex;align-items:baseline;gap:.4em;
  font-feature-settings:"liga","dlig";
  padding:.05em .3em .15em;
  overflow:visible;
}
.crown-title .aq, .crown-title .bo{
  display:inline-block;
  padding-right:.18em;
  overflow:visible;
  font-style:italic;
}
.crown-title .aq{ color: var(--el-3); }
.crown-title .bo{ color: var(--ad-3); }
.crown-title .amp{
  color:var(--ink-soft);font-style:normal;font-weight:300;font-size:.7em;
  transform:translateY(-.05em);
  opacity:.55;
}
.crown-sub{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:clamp(13px,1.1vw,17px);color:var(--ink-soft);opacity:.78;
  letter-spacing:.01em;margin-top:2px;
}

/* ── Diptych (the two panel cards) ─────────────────────── */
.diptych{
  position:relative;
  display:flex;
  flex:1 1 auto;
  width:100%;
  min-height:0;
  padding:clamp(20px,3vh,44px) clamp(20px,3vw,52px) clamp(14px,2.4vh,28px);
  gap:clamp(14px,2vw,32px);
  align-items:stretch;
}

/* ── Panel ─────────────────────────────────────────────── */
.panel{
  position:relative;
  flex:1 1 50%;
  min-height: min(640px, calc(100vh - 220px));
  overflow:hidden;
  text-decoration:none;color:inherit;cursor:pointer;
  border-radius:8px;
  outline:none;
  isolation:isolate;
  transition:flex-basis .9s cubic-bezier(.4,.0,.2,1),
             box-shadow .6s ease,
             transform .6s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 24px 60px -20px rgba(40,30,80,.28),
    0 6px 14px -4px rgba(40,30,80,.14);
}
.panel:hover{
  flex-basis:56%;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 30px 80px -20px rgba(40,30,80,.34),
    0 8px 20px -4px rgba(40,30,80,.18);
}
.diptych:has(.panel:hover) .panel:not(:hover){flex-basis:44%}

/* photo */
.photo-wrap{position:absolute;inset:0;z-index:1;overflow:hidden}
.photo{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.06);transition:transform 6s ease, filter .8s ease, opacity .8s ease;
  opacity:.82;
  filter:saturate(.92) contrast(1.02);
}
.panel.is-active .photo{transform:scale(1.10);opacity:.95;filter:saturate(1.08) contrast(1.05)}
.photo-tint{
  position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.75;
}
.panel[data-palette="el"] .photo-tint{
  background:
    radial-gradient(120% 80% at 50% 10%, transparent 0%, var(--el-1) 80%),
    linear-gradient(180deg, transparent 0%, var(--el-2) 100%);
}
.panel[data-palette="ad"] .photo-tint{
  background:
    radial-gradient(120% 80% at 50% 10%, transparent 0%, var(--ad-1) 80%),
    linear-gradient(180deg, transparent 0%, var(--ad-2) 100%);
}
.photo-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, transparent 50%, rgba(20,18,40,.30) 100%),
    linear-gradient(0deg, rgba(255,255,255,.32) 0%, transparent 35%);
}

/* big blob behind name */
.blob{
  position:absolute;z-index:2;
  width:120%;height:120%;left:-10%;top:-5%;
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.75;
}
.panel[data-side="left"]  .blob{left:-22%}
.panel[data-side="right"] .blob{left:2%}

/* ── Floating drops (CSS-based, reliable) ──────────────── */
.drops{
  position:absolute;inset:0;z-index:3;
  pointer-events:none;overflow:hidden;
  border-radius:inherit;
}
.drop{
  position:absolute;
  bottom:-40px;
  border-radius:50%;
  mix-blend-mode:multiply;
  filter:blur(2px);
  animation: rise linear infinite;
  will-change: transform, opacity;
}
@keyframes rise{
  0%   { transform: translateY(0)        translateX(0)             scale(.6); opacity: 0;}
  8%   { opacity: var(--peak, .8); }
  55%  { opacity: var(--peak, .8); }
  100% { transform: translateY(-110vh)   translateX(var(--drift))  scale(1.3); opacity: 0;}
}

/* ── Content ───────────────────────────────────────────── */
.content{
  position:absolute;z-index:5;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,5vw,80px);
  color:var(--ink);
  pointer-events:none;
}
.content > *{pointer-events:auto}
.content.align-l{align-items:flex-start;text-align:left}
.content.align-r{align-items:flex-end;text-align:right}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Inter",sans-serif;font-weight:500;font-size:11px;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-soft);
  padding:6px 12px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:.5px solid rgba(255,255,255,.7);
  border-radius:999px;
  opacity:.92;
}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;display:inline-block;
}
.panel[data-palette="el"] .eyebrow{color:var(--el-ink)}
.panel[data-palette="ad"] .eyebrow{color:var(--ad-ink)}

/* name */
.name{
  margin:14px 0 6px;line-height:.88;
  display:flex;flex-direction:column;
}
.content.align-r .name{align-items:flex-end}

.name-script{
  font-family:"Italianno", "Allura", "Pinyon Script", "Brush Script MT", cursive;
  font-size:clamp(72px, 11vw, 168px);
  font-weight:400;
  letter-spacing:.005em;
  line-height:.92;
  display:inline-block;
  padding:.04em .45em .12em .08em;
  overflow:visible;
  max-width:100%;
  background:linear-gradient(160deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.panel[data-palette="el"] .name-script{
  --g1: var(--el-2); --g2: var(--el-3); --g3: var(--el-ink);
}
.panel[data-palette="ad"] .name-script{
  --g1: var(--ad-2); --g2: var(--ad-3); --g3: var(--ad-ink);
}

.name-surname{
  font-family:"Cormorant Garamond", serif;font-style:italic;font-weight:500;
  font-size:clamp(20px, 2vw, 30px);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:-.15em;margin-left:.4em;
  opacity:.95;
}
.content.align-r .name-surname{margin-left:0;margin-right:.4em}

/* blurb */
.blurb{
  margin:22px 0 0;max-width:34ch;
  font-family:"Cormorant Garamond", serif;font-style:italic;font-weight:400;
  font-size:clamp(15px, 1.25vw, 19px);line-height:1.45;
  color:var(--ink);opacity:.82;
}

/* CTA */
.cta{
  margin-top:32px;position:relative;
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding-top:18px;
}
.content.align-r .cta{align-items:flex-end}

.cta .brush{
  position:absolute;left:-12px;right:-12px;top:0;
  width:calc(100% + 24px);height:22px;pointer-events:none;
  opacity:0;transform:scaleX(.4);transform-origin:left center;
  transition:opacity .55s ease, transform .8s cubic-bezier(.4,0,.2,1);
}
.content.align-r .cta .brush{transform-origin:right center}
.panel.is-active .cta .brush{opacity:.75;transform:scaleX(1)}

.cta-text{
  font-family:"Inter",sans-serif;font-weight:500;font-size:15px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:14px;
  padding-top:6px;
}
.panel[data-palette="el"].is-active .cta-text{color:var(--el-ink)}
.panel[data-palette="ad"].is-active .cta-text{color:var(--ad-ink)}
.cta-text .arrow svg{display:block;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.panel.is-active .cta-text .arrow svg{transform:translateX(8px)}

.cta-url{
  font-family:"Inter",sans-serif;font-weight:400;font-size:11px;
  letter-spacing:.18em;color:var(--ink-soft);opacity:.62;
}

/* ── Footer ────────────────────────────────────────────── */
.foot{
  position:relative;z-index:25;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px clamp(22px,3vw,48px);
  font-family:"Inter",sans-serif;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.62;
  flex:0 0 auto;
}
.foot a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.foot a:hover{color:var(--ink)}

/* ── Smaller screens ───────────────────────────────────── */
@media (max-width: 880px){
  .diptych{flex-direction:column;padding:16px;gap:14px}
  .panel{flex:1 1 auto;min-height:min(520px, 80vh)}
  .panel:hover{flex-basis:auto}
  .diptych:has(.panel:hover) .panel:not(:hover){flex-basis:auto}
  .name-script{font-size:clamp(70px, 17vw, 130px)}
  .crown-title{font-size:clamp(26px, 6vw, 42px)}
  .content.align-l, .content.align-r{align-items:center;text-align:center}
  .blurb{max-width:36ch}
  .foot{flex-direction:column;gap:6px}
}

@media (prefers-reduced-motion: reduce){
  .drop, .blob ellipse{animation:none !important}
  .photo, .panel, .name-script, .cta .brush, .cta-text .arrow svg{transition:none !important}
}