/* Maxwell's Restaurant — Temporary Landing Page */
*{margin:0;padding:0;box-sizing:border-box}

:root{
/* ── Color Tokens ── */
--black:#000;
--charcoal:#1A1A1A;
--dark-gray:#313131;
--off-white:#E8E8E8;
--white:#FFF;
--gold:#C9A96E;
--gold-light:#DFC89A;
--gold-dark:#A88C52;

/* ── Typography ── */
--font-heading:'Playfair Display',serif;
--font-body:'Inter',sans-serif;

/* ── Spacing ── */
--space-xs:4px;
--space-sm:8px;
--space-md:16px;
--space-lg:24px;
--space-xl:32px;
--space-2xl:48px;
--space-3xl:64px;
--space-4xl:96px;
}

/* ── Base ── */
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--off-white);background:var(--black);line-height:1.6;font-size:16px;opacity:0;animation:bodyFadeIn .6s .1s ease forwards;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

@keyframes bodyFadeIn{to{opacity:1}}

/* ── Focus Styles ── */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ════════════════════════════════════════
   HERO SECTION
   ════════════════════════════════════════ */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-2xl) var(--space-md)}

.hero-container{max-width:800px;width:100%}

.hero-logo{width:200px;height:auto;margin:0 auto var(--space-lg);display:block}

.gold-divider{width:60px;height:1px;background:var(--gold);margin:0 auto var(--space-lg)}

.hero h1{font-family:var(--font-heading);font-size:clamp(1.75rem,4vw,2.75rem);font-weight:600;color:var(--white);line-height:1.3;margin-bottom:var(--space-md)}

.hero-subtitle{font-size:clamp(0.95rem,2vw,1.125rem);color:var(--off-white);max-width:520px;margin:0 auto var(--space-2xl);line-height:1.7}

/* ── CTA Button ── */
.btn-reservation{display:inline-block;background:var(--gold);color:var(--black);font-family:var(--font-body);font-weight:500;font-size:1rem;padding:14px 36px;text-decoration:none;letter-spacing:.5px;transition:background .2s ease,transform .2s ease;min-height:48px;min-width:48px}

.btn-reservation:hover{background:var(--gold-light);transform:translateY(-1px)}
.btn-reservation:active{background:var(--gold-dark);transform:translateY(0)}

/* ════════════════════════════════════════
   COOKING POT ANIMATION
   ════════════════════════════════════════ */
.pot-animation{position:relative;width:190px;height:200px;margin:0 auto var(--space-2xl)}

/* Warm glow beneath pot */
.pot-glow{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:150px;height:40px;background:radial-gradient(ellipse,rgba(201,169,110,.3) 0%,transparent 70%);animation:glowPulse 4s ease-in-out infinite;will-change:transform,opacity}

@keyframes glowPulse{0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}

/* Pot body */
.pot{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);animation:potWobble 4s ease-in-out infinite;will-change:transform}

.pot-body{width:96px;height:58px;border:2px solid rgba(201,169,110,.4);border-top:none;border-radius:0 0 18px 18px;position:relative;overflow:hidden}

.pot-rim{width:112px;height:2px;background:rgba(201,169,110,.5);position:absolute;top:0;left:-8px}

.pot-handle{position:absolute;top:8px;width:14px;height:22px;border:2px solid rgba(201,169,110,.35);border-radius:50%}

.pot-handle-left{left:-16px}
.pot-handle-right{right:-16px}

@keyframes potWobble{0%,100%{transform:translateX(-50%) rotate(0deg)}25%{transform:translateX(-50%) rotate(.5deg)}75%{transform:translateX(-50%) rotate(-.5deg)}}

/* Simmer bubbles inside pot */
.bubble{position:absolute;border-radius:50%;background:rgba(201,169,110,.25);will-change:transform,opacity;animation:bubbleRise 2.5s ease-in infinite}

.bubble-1{width:4px;height:4px;bottom:4px;left:20%;animation-delay:0s;animation-duration:2.8s}
.bubble-2{width:5px;height:5px;bottom:4px;left:55%;animation-delay:1s;animation-duration:2.4s}
.bubble-3{width:3px;height:3px;bottom:4px;left:75%;animation-delay:1.8s;animation-duration:3s}

@keyframes bubbleRise{0%{opacity:0;transform:translateY(0) scale(1)}15%{opacity:.5}60%{opacity:.3;transform:translateY(-20px) scale(1.2)}100%{opacity:0;transform:translateY(-36px) scale(.6)}}

/* Steam wisps */
.steam-container{position:absolute;bottom:76px;left:50%;transform:translateX(-50%);width:96px;height:100px}

.steam{position:absolute;bottom:0;width:2px;background:linear-gradient(to top,rgba(201,169,110,.35),transparent);border-radius:50%;will-change:transform,opacity}

.steam-1{left:16px;height:36px;animation:steamRiseA 3s ease-out infinite}
.steam-2{left:34px;height:42px;animation:steamRiseB 3.5s ease-out .6s infinite}
.steam-3{left:52px;height:34px;animation:steamRiseA 2.8s ease-out 1.2s infinite}
.steam-4{left:68px;height:38px;animation:steamRiseC 3.2s ease-out 1.8s infinite}
.steam-5{left:44px;height:30px;animation:steamRiseB 4s ease-out 2.4s infinite}

@keyframes steamRiseA{
0%{opacity:0;transform:translateY(0) scaleX(1)}
20%{opacity:.6}
60%{opacity:.25;transform:translateY(-40px) scaleX(1.6) translateX(5px)}
100%{opacity:0;transform:translateY(-70px) scaleX(2.2) translateX(-4px)}
}

@keyframes steamRiseB{
0%{opacity:0;transform:translateY(0) scaleX(1)}
20%{opacity:.5}
50%{opacity:.3;transform:translateY(-35px) scaleX(1.4) translateX(-6px)}
100%{opacity:0;transform:translateY(-65px) scaleX(1.8) translateX(3px)}
}

@keyframes steamRiseC{
0%{opacity:0;transform:translateY(0) scaleX(1)}
25%{opacity:.55}
55%{opacity:.2;transform:translateY(-38px) scaleX(1.5) translateX(7px)}
100%{opacity:0;transform:translateY(-60px) scaleX(2) translateX(-5px)}
}

/* Reduced motion: freeze all animations mid-state */
@media(prefers-reduced-motion:reduce){
body{animation:none;opacity:1}
.steam{animation:none;opacity:.3;transform:translateY(-25px) scaleX(1.3)}
.pot-glow{animation:none;opacity:.8;transform:translateX(-50%) scale(1)}
.pot{animation:none;transform:translateX(-50%) rotate(0deg)}
.bubble{animation:none;opacity:.2;transform:translateY(-10px)}
}

/* ════════════════════════════════════════
   CONTACT STRIP
   ════════════════════════════════════════ */
.contact-strip{background:var(--charcoal);padding:var(--space-2xl) var(--space-md)}

.contact-grid{max-width:800px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:var(--space-xl);text-align:center}

.contact-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}

.contact-icon{width:24px;height:24px;color:var(--gold);flex-shrink:0}

.contact-label{font-family:var(--font-heading);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:2px;color:var(--gold)}

.contact-link{color:var(--white);text-decoration:none;font-size:1rem;transition:color .2s ease;padding:var(--space-xs);min-height:48px;display:inline-flex;align-items:center}
.contact-link:hover{color:var(--gold-light)}

.contact-text{color:var(--white);font-size:1rem}

/* ════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════ */
.footer{background:var(--dark-gray);padding:var(--space-xl) var(--space-md);text-align:center}

.footer-container{max-width:800px;margin:0 auto}

.footer-address{color:var(--off-white);font-size:.9rem;margin-bottom:var(--space-md)}

.social-links{display:flex;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-md)}

.social-links a{color:var(--off-white);transition:color .2s ease;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:var(--space-sm)}
.social-links a:hover{color:var(--gold-light)}
.social-links svg{width:20px;height:20px}

.footer-copyright{color:rgba(232,232,232,.5);font-size:.8rem;margin-bottom:var(--space-xs)}

.footer-credit{font-size:.75rem;color:rgba(232,232,232,.35)}
.footer-credit a{color:rgba(232,232,232,.45);text-decoration:none;transition:color .2s ease}
.footer-credit a:hover{color:var(--gold-light)}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

/* Tablet (768px+) */
@media(min-width:768px){
.hero-logo{width:250px}
.contact-grid{grid-template-columns:repeat(3,1fr)}
}

/* Desktop (1024px+) */
@media(min-width:1024px){
.hero-logo{width:300px}
.hero-subtitle{font-size:1.125rem}
}