/* ═══════════════════════════════════════════════════════════
   EAST OCEAN — SHARED VISUAL EFFECTS
   Ambient atmosphere · 3D tilt · shine sweep · scroll reveals ·
   CSS-3D rotating "转心" platter hero centerpiece
   ═══════════════════════════════════════════════════════════ */

/* ── Ambient gold particle canvas (fixed, behind content) ── */
#eo-particles{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1; mix-blend-mode:screen; opacity:.85;
}

/* ── Ambient glow orbs (large soft blurred gradients) ── */
.eo-glow-orb{
  position:absolute; border-radius:50%; filter:blur(70px);
  pointer-events:none; z-index:0; opacity:.30; will-change:transform;
}
@keyframes eo-drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(34px,-46px) scale(1.16); }
}
@keyframes eo-drift-rev{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-40px,36px) scale(1.1); }
}
.eo-glow-orb.drift{ animation:eo-drift 19s ease-in-out infinite; }
.eo-glow-orb.drift-rev{ animation:eo-drift-rev 23s ease-in-out infinite; }

/* ── Scroll reveal variants ── */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(46px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
  .reveal.in-view{opacity:1;transform:translateY(0)}

  .reveal-scale{opacity:0;transform:scale(.82);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
  .reveal-scale.in-view{opacity:1;transform:scale(1)}

  .reveal-blur{opacity:0;filter:blur(14px);transform:translateY(28px) scale(1.02);transition:opacity 1s ease,filter 1s ease,transform 1s ease}
  .reveal-blur.in-view{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}

  .reveal-left{opacity:0;transform:translateX(-60px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
  .reveal-left.in-view{opacity:1;transform:translateX(0)}

  .reveal-right{opacity:0;transform:translateX(60px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
  .reveal-right.in-view{opacity:1;transform:translateX(0)}

  /* stagger delay helpers */
  .d-1{transition-delay:.08s}
  .d-2{transition-delay:.16s}
  .d-3{transition-delay:.24s}
  .d-4{transition-delay:.32s}
  .d-5{transition-delay:.40s}
  .d-6{transition-delay:.48s}
  .d-7{transition-delay:.56s}
  .d-8{transition-delay:.64s}
}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-scale,.reveal-blur,.reveal-left,.reveal-right{opacity:1!important;transform:none!important;filter:none!important}
}

/* ── 3D mouse-tilt cards ── */
[data-tilt-3d]{
  transition:transform .15s ease, box-shadow .3s ease;
  will-change:transform; position:relative;
}
.tilt-shine{
  position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; mix-blend-mode:overlay;
  transition:background .15s ease; z-index:3;
}

/* ── Shine-sweep buttons ── */
.shine-btn{ position:relative; overflow:hidden; }
.shine-btn::after{
  content:''; position:absolute; top:0; left:-150%;
  width:55%; height:100%;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);
  transform:skewX(-20deg); transition:left .7s ease; pointer-events:none;
}
.shine-btn:hover::after{ left:150%; }

/* ── CSS-3D rotating "转心" platter (hero wow centerpiece) ── */
.platter-stage{ perspective:1500px; perspective-origin:50% 35%; }
.platter-3d{
  position:relative; transform-style:preserve-3d;
  animation:platter-spin 26s linear infinite;
}
@keyframes platter-spin{
  from{ transform:rotateX(64deg) rotateZ(0deg); }
  to{   transform:rotateX(64deg) rotateZ(360deg); }
}
.platter-ring{
  position:absolute; border-radius:50%;
  border:1px solid rgba(201,160,32,.35);
  box-shadow:0 0 50px rgba(201,160,32,.22), inset 0 0 70px rgba(201,160,32,.08);
}
.platter-dish{
  position:absolute; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; line-height:1;
  box-shadow:0 10px 26px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.12);
}
.platter-dish::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.4), transparent 60%);
}
.platter-glow{
  position:absolute; inset:-25%; border-radius:50%;
  background:radial-gradient(circle, rgba(232,204,85,.38) 0%, transparent 70%);
  filter:blur(34px); animation:eo-pulse 4.5s ease-in-out infinite;
}
@keyframes eo-pulse{
  0%,100%{ opacity:.5; transform:scale(1); }
  50%{ opacity:.95; transform:scale(1.1); }
}
@media(prefers-reduced-motion:reduce){
  .platter-3d{ animation:none; transform:rotateX(64deg) rotateZ(20deg); }
  .platter-glow{ animation:none; }
}

/* ── Hero floating sparkle accents ── */
@keyframes eo-float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(8deg); }
}
.eo-float{ animation:eo-float 5s ease-in-out infinite; }

/* ── Gradient text shimmer (for hero / banner highlights) ── */
@keyframes eo-shimmer{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}
.eo-shimmer-text{
  background:linear-gradient(90deg,#C9A020,#FFE085,#E8CC55,#C9A020);
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:eo-shimmer 5s linear infinite;
}

/* ═══════════════════════════════════════════════════════════
   PHASE 2 — scroll progress · cursor glow · parallax ·
   magnetic buttons · 3D split-text reveal · image wipe
   ═══════════════════════════════════════════════════════════ */

/* ── Top scroll progress bar ── */
#eo-progress{
  position:fixed; top:0; left:0; height:2.5px; width:0%;
  background:linear-gradient(90deg,#C9A020,#E8CC55 50%,#1B5E38);
  z-index:9999; box-shadow:0 0 6px rgba(201,160,32,.5);
  transition:width .08s linear; pointer-events:none;
}

/* ── Cursor-follow ambient glow (desktop only) ── */
#eo-cursor-glow{
  position:fixed; top:0; left:0; width:420px; height:420px;
  border-radius:50%; pointer-events:none; z-index:2;
  background:radial-gradient(circle, rgba(232,204,85,.12) 0%, rgba(201,160,32,.05) 45%, transparent 72%);
  transform:translate(-50%,-50%); opacity:0;
  transition:opacity .4s ease; will-change:transform;
}
@media(pointer:coarse){ #eo-cursor-glow{ display:none; } }
@media(prefers-reduced-motion:reduce){ #eo-cursor-glow{ display:none; } }

/* ── Parallax-driven elements ── */
[data-parallax]{ will-change:transform; }

/* ── Magnetic buttons (transform applied via JS) ── */
[data-magnetic]{ transition:transform .3s cubic-bezier(.2,1,.3,1); }

/* ── 3D split-text letter reveal ── */
.split-text{ perspective:600px; }
@media(prefers-reduced-motion:no-preference){
  .split-text .split-char{
    display:inline-block; opacity:0;
    transform:translateY(.65em) rotateX(-85deg);
    transform-origin:50% 100%; transform-style:preserve-3d;
    transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
  }
  .split-text.in-view .split-char{ opacity:1; transform:translateY(0) rotateX(0deg); }
}
@media(prefers-reduced-motion:reduce){
  .split-text .split-char{ opacity:1!important; transform:none!important; }
}

/* ── Image clip-path wipe reveal ── */
@media(prefers-reduced-motion:no-preference){
  .img-reveal{
    clip-path:inset(0 100% 0 0);
    transition:clip-path 1.15s cubic-bezier(.16,1,.3,1) .15s;
  }
  .img-reveal.in-view{ clip-path:inset(0 0% 0 0); }
}
@media(prefers-reduced-motion:reduce){
  .img-reveal{ clip-path:none!important; }
}

/* ── Animated gradient underline (section title accents) ── */
.eo-underline{ position:relative; display:inline-block; padding-bottom:18px; }
.eo-underline::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:0; height:2px;
  background:linear-gradient(90deg,transparent,#C9A020,#E8CC55,#C9A020,transparent);
  transition:width 1s cubic-bezier(.16,1,.3,1) .25s;
}
.eo-underline.in-view::after{ width:140px; }
@media(prefers-reduced-motion:reduce){
  .eo-underline::after{ width:140px; transition:none; }
}

/* ── Hero photo: living "Ken Burns" zoom + gold halo frame + one-time light sweep ── */
@media(prefers-reduced-motion:no-preference){
  .eo-photo-frame{ position:relative; }
  .eo-photo-frame::before{
    content:''; position:absolute; inset:-8px; border-radius:1.4rem;
    background:rgba(201,160,32,.16); filter:blur(18px); z-index:-1;
  }
  .eo-photo-frame img{
    animation:eo-kenburns 22s ease-in-out infinite alternate;
  }
  .eo-photo-frame::after{
    content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
    border-radius:1rem; overflow:hidden;
    background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
    transform:translateX(-130%); mix-blend-mode:overlay;
    animation:eo-photo-sweep 3.2s cubic-bezier(.16,1,.3,1) .6s 1 forwards;
  }
}
@keyframes eo-kenburns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.09) translate(-1.5%,-1.5%); }
}
@keyframes eo-photo-sweep{
  to{ transform:translateX(130%); }
}
@media(prefers-reduced-motion:reduce){
  .eo-photo-frame::before,.eo-photo-frame::after{ display:none; }
}

/* ── Border Beam: rotating gold light tracing a card's border ── */
.border-beam-wrap{ position:relative; isolation:isolate; }
.border-beam-wrap::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--mu-angle,0deg),
    transparent 0deg, transparent 250deg,
    #E8CC55 280deg, #C9A020 300deg, #1B5E38 320deg, transparent 340deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:eo-beam-rotate 5s linear infinite;
  pointer-events:none; z-index:2;
}
@keyframes eo-beam-rotate{
  to{ --mu-angle:360deg; }
}
@property --mu-angle{
  syntax:'<angle>'; inherits:false; initial-value:0deg;
}
@media(prefers-reduced-motion:reduce){ .border-beam-wrap::before{ animation:none; } }

/* ── Border Beam color variants ── */
.border-beam-wrap.beam-jade::before{
  background:conic-gradient(from var(--mu-angle,0deg),
    transparent 0deg, transparent 250deg,
    #7DDFC3 280deg, #2B8B3A 300deg, #1B5E38 320deg, transparent 340deg);
}
.border-beam-wrap.beam-rose::before{
  background:conic-gradient(from var(--mu-angle,0deg),
    transparent 0deg, transparent 250deg,
    #F6B8C4 280deg, #D9647A 300deg, #8B2635 320deg, transparent 340deg);
}
.border-beam-wrap.beam-royal::before{
  background:conic-gradient(from var(--mu-angle,0deg),
    transparent 0deg, transparent 250deg,
    #B9A6FF 280deg, #6C5CE7 300deg, #2E2360 320deg, transparent 340deg);
}

/* ═══════════════════════════════════════════════════════════
   FRAMER MOTION-STYLE SPRING INTERACTIONS
   Bouncy overshoot easing on hover/press for buttons & cards
   ═══════════════════════════════════════════════════════════ */
:root{ --spring: cubic-bezier(.34,1.56,.64,1); }

/* ── Buttons: spring pop on hover, settle on press ── */
.btn-green,.btn-gold,.btn-outline{
  transition:background .2s, opacity .2s, box-shadow .25s, transform .5s var(--spring) !important;
}
.btn-green:hover,.btn-gold:hover,.btn-outline:hover{ transform:translateY(-3px) scale(1.045) !important; }
.btn-green:active,.btn-gold:active,.btn-outline:active{ transform:scale(.96) !important; }

/* ── Spring card: gentle bounce-lift on hover (reviews, dishes, etc.) ── */
.spring-card{ transition:transform .5s var(--spring), box-shadow .35s ease; }
.spring-card:hover{ transform:translateY(-6px) scale(1.035); box-shadow:0 16px 36px rgba(0,0,0,.12); }

/* ── Dish cards: spring bounce on hover ── */
.dish-item{ transition:transform .5s var(--spring); }
.dish-item:hover{ transform:translateY(-6px) scale(1.06); }

@media(prefers-reduced-motion:reduce){
  .btn-green,.btn-gold,.btn-outline,.spring-card,.dish-item{ transition:none !important; }
  .btn-green:hover,.btn-gold:hover,.btn-outline:hover,
  .btn-green:active,.btn-gold:active,.btn-outline:active,
  .spring-card:hover,.dish-item:hover{ transform:none !important; }
}