:root{
  --bg:#090908;
  --paper:#f2efe7;
  --muted:#99968f;
  --muted-2:#6f6c66;
  --line:rgba(242,239,231,.16);
  --line-strong:rgba(242,239,231,.34);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--paper)}
body{font-family:"DM Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased}

.page{
  min-height:100vh;
  min-height:100svh;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:28px 34px 22px;
  background:
    radial-gradient(circle at 75% 46%,rgba(255,255,255,.028),transparent 26%),
    radial-gradient(circle at 14% 78%,rgba(255,255,255,.018),transparent 24%),
    var(--bg);
}

.grain{
  position:fixed;inset:0;pointer-events:none;opacity:.11;z-index:20;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light
}

.ambient{position:absolute;border-radius:50%;filter:blur(20px);pointer-events:none}
.ambient-a{width:560px;height:560px;right:2%;top:19%;background:radial-gradient(circle,rgba(255,255,255,.025),transparent 67%)}
.ambient-b{width:420px;height:420px;left:-120px;bottom:-180px;background:radial-gradient(circle,rgba(255,255,255,.018),transparent 67%)}

.topbar,footer{
  position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  font-size:10px;letter-spacing:.17em;text-transform:uppercase
}

.sigil{
  position:relative;width:46px;height:32px;border:1px solid var(--line-strong);border-radius:999px;
  display:flex;align-items:center;justify-content:center;font-weight:600;letter-spacing:-.07em;
  font-size:11px;overflow:hidden
}
.sigil span{display:inline-block}
.sigil-f{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:1.02em;transform:translateY(-.2px)}
.sigil-w{transform:translateX(1px)}
.sigil-d{transform:translateX(-1px)}
.place{color:var(--muted)}
.place span{padding:0 .45em;color:var(--paper)}

.hero{
  position:relative;z-index:3;width:min(1320px,100%);margin:auto;
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);
  align-items:center;gap:56px;padding:58px 0 54px
}
.copy{min-width:0}
.kicker{font-size:10px;letter-spacing:.27em;color:var(--muted);font-weight:600;margin-bottom:19px}

h1{margin:0;line-height:.84;letter-spacing:-.06em;font-weight:500}
h1 span{display:block}
.winefunday{font-size:clamp(66px,10vw,148px)}
.social{
  font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(39px,4.9vw,72px);letter-spacing:-.035em;margin-top:.24em
}

.claim{
  margin:44px 0 0;font-size:clamp(27px,3.15vw,48px);line-height:.98;
  letter-spacing:-.04em;font-weight:500
}
.claim span{color:#d7d3ca}

.microline{
  display:grid;grid-template-columns:minmax(80px,1fr) auto;align-items:center;gap:18px;
  width:min(670px,100%);margin:31px 0 0
}
.microline span{height:1px;background:var(--line)}
.microline small{font-size:8px;letter-spacing:.21em;color:var(--muted-2);white-space:nowrap}

.tease-block{margin-top:28px}
.pour{margin:0;font-size:15px;letter-spacing:.08em}
.pour em{font-family:"Playfair Display",Georgia,serif;font-size:1.12em;font-weight:500}
.sub{margin:8px 0 0;color:var(--muted);font-size:15px}

.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.button{
  text-decoration:none;border-radius:999px;padding:13px 17px;font-size:13px;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease
}
.button:hover{transform:translateY(-2px)}
.primary{background:var(--paper);color:var(--bg)}
.ghost{border:1px solid var(--line);color:var(--paper)}
.ghost:hover{border-color:var(--line-strong)}

.art{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:510px
}
.glassline{width:min(380px,100%);height:auto;overflow:visible;filter:drop-shadow(0 28px 44px rgba(0,0,0,.38))}
.draw{
  fill:none;stroke:rgba(242,239,231,.54);stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw 2.2s cubic-bezier(.23,.74,.24,1) forwards
}
.rim{animation-delay:.15s}
.wine-line{animation-delay:.28s;stroke:rgba(242,239,231,.38)}
.stem{animation-delay:.5s}
.base{animation-delay:.68s}
.wine-liquid{
  transform-box:fill-box;
  transform-origin:center bottom;
  transform:scaleY(0);
  animation:liquidRise 1.8s cubic-bezier(.2,.75,.2,1) 1.05s forwards;
}
.wine-surface-svg{
  fill:rgba(242,239,231,.035);
  stroke:rgba(242,239,231,.33);
  stroke-width:1;
  opacity:0;
  animation:surfaceIn .7s ease 1.55s forwards;
}
.art-label{
  position:absolute;bottom:44px;font-size:8px;letter-spacing:.24em;color:var(--muted);
  text-transform:uppercase
}

footer{color:var(--muted);border-top:1px solid var(--line);padding-top:17px}
.footer-center{color:#6e6b65}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes liquidRise{to{transform:scaleY(1)}}
@keyframes surfaceIn{to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .draw{animation:none;stroke-dashoffset:0}  .button{transition:none}
}

@media(max-width:920px){
  .hero{grid-template-columns:1fr;gap:20px;padding:54px 0 32px}
  .art{position:absolute;right:-56px;top:49%;transform:translateY(-50%);opacity:.16;min-height:0}
  .glassline{width:320px}
    .art-label{display:none}
  .copy{position:relative;z-index:4}
}

@media(max-width:650px){
  .page{padding:21px 19px 17px}
  .place{font-size:8px}
  .sigil{width:42px;height:29px}
  .hero{padding:46px 0 28px}
  .kicker{font-size:8px;margin-bottom:15px}
  .winefunday{font-size:clamp(52px,17.3vw,88px)}
  .social{font-size:clamp(34px,11vw,56px)}
  .claim{margin-top:36px;font-size:clamp(27px,8.8vw,41px)}
  .microline{grid-template-columns:1fr;margin-top:25px;gap:10px}
  .microline small{font-size:7px;white-space:normal;line-height:1.5}
  .tease-block{margin-top:22px}
  .sub{max-width:290px;line-height:1.45}
  .actions{flex-direction:column;align-items:stretch;max-width:330px}
  .button{text-align:center}
  .art{right:-120px;top:53%;opacity:.11}
  footer{font-size:8px;letter-spacing:.11em}
  .footer-center{display:none}
}








/* V3.5 — quiet luxury: no pour, only a slow living fill */
@media (min-width: 921px){
  .glassline{
    width:min(437px,115%);
  }
  .art{
    transform:translateX(-2%);
  }
}

/* Deep, restrained burgundy */
.wine-liquid{
  fill:#2d0d13;
  opacity:.92;
  transform-box:fill-box;
  transform-origin:center bottom;
  transform:scaleY(0);
  animation:liquidRise 9.5s cubic-bezier(.22,.7,.2,1) 1.6s forwards;
}

.wine-surface-svg{
  fill:rgba(67,14,24,.80);
  stroke:rgba(150,68,80,.62);
  stroke-width:1;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:
    surfaceIn .45s ease 11.1s forwards,
    surfaceRock 4.6s ease-in-out 11.55s infinite;
}

/* Very subtle surface movement — enough to feel alive, never playful */
.surface-wave{
  fill:none;
  stroke:rgba(170,78,91,.34);
  stroke-width:1.05;
  stroke-linecap:round;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
}
.wave-a{
  animation:
    waveIn .55s ease 11.15s forwards,
    waveMoveA 4.2s ease-in-out 11.7s infinite;
}
.wave-b{
  animation:
    waveIn .55s ease 11.2s forwards,
    waveMoveB 4.8s ease-in-out 11.8s infinite;
}

@keyframes liquidRise{
  0%{transform:scaleY(0)}
  12%{transform:scaleY(.025)}
  30%{transform:scaleY(.14)}
  54%{transform:scaleY(.40)}
  78%{transform:scaleY(.72)}
  100%{transform:scaleY(1)}
}

@keyframes surfaceIn{to{opacity:1}}

@keyframes surfaceRock{
  0%,100%{transform:translateY(0) rotate(0deg) scaleX(1)}
  25%{transform:translateY(-1px) rotate(-1deg) scaleX(1.018)}
  52%{transform:translateY(.8px) rotate(.9deg) scaleX(.99)}
  78%{transform:translateY(-.4px) rotate(-.45deg) scaleX(1.008)}
}

@keyframes waveIn{to{opacity:.58}}

@keyframes waveMoveA{
  0%,100%{transform:translateX(0) translateY(0) rotate(0deg)}
  50%{transform:translateX(2.5px) translateY(-1.2px) rotate(.8deg)}
}

@keyframes waveMoveB{
  0%,100%{transform:translateX(0) translateY(0) rotate(0deg)}
  50%{transform:translateX(-2.8px) translateY(1px) rotate(-.7deg)}
}

@media(prefers-reduced-motion:reduce){
  .wine-liquid{animation:none;transform:scaleY(1)}
  .wine-surface-svg{animation:none;opacity:1}
  .surface-wave{animation:none;opacity:.45}
}


/* V3.6 timing:
   fill: 1.6s -> 11.1s
   surface movement begins only after filling is complete */