/* Wesurfin' — custom layer (atmosphere, components, motion) */
@import url('/assets/css/tokens.css');

html{scroll-behavior:smooth}
body{background:var(--color-bg);color:var(--color-text);font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5,h6,.font-display{font-family:'Eczar',Georgia,serif;font-weight:500!important}
::selection{background:var(--terracotta-300);color:var(--ink-900)}

/* Kicker (hashtag-style eyebrow) */
.kicker{font-family:'Manrope',sans-serif;font-weight:700;letter-spacing:.16em;font-size:.74rem;color:var(--color-gold)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;border-radius:var(--radius-pill);
  padding:.85rem 1.6rem;line-height:1;transition:transform var(--dur) var(--ease-out),background var(--dur),box-shadow var(--dur),color var(--dur);cursor:pointer;min-height:48px}
.btn:focus-visible{outline:3px solid var(--terracotta-300);outline-offset:2px}
.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg);box-shadow:var(--shadow-glow)}
.btn-primary:hover{background:var(--btn-primary-bg-hover);transform:translateY(-2px)}
.btn-light{background:var(--white);color:var(--sea-800)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn-outline{border:1.5px solid currentColor;color:var(--sea-800)}
.btn-outline:hover{background:var(--sea-800);color:#fff;border-color:var(--sea-800)}
.btn-outline-light{border:1.5px solid rgba(255,255,255,.7);color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--sea-800)}

/* Header */
.site-header{transition:background var(--dur) var(--ease-out),box-shadow var(--dur),backdrop-filter var(--dur)}
.site-header.is-solid{background:var(--color-header);box-shadow:0 6px 24px -14px rgba(0,0,0,.5);backdrop-filter:saturate(1.1)}
/* Menu pages have no hero, so the header is solid from the top */
body.menu-page .site-header{background:var(--color-header);box-shadow:0 6px 24px -14px rgba(0,0,0,.5)}
.nav-link{position:relative;font-weight:600;font-size:.95rem;color:#fff;opacity:.92;transition:opacity var(--dur)}
.nav-link::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--terracotta-500);transition:width var(--dur) var(--ease-out)}
.nav-link:hover{opacity:1}.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link.active{opacity:1}

/* Mobile drawer */
.drawer{transition:transform var(--dur-slow) var(--ease-out)}
.drawer[aria-hidden="true"]{transform:translateX(100%)}
.drawer[aria-hidden="false"]{transform:translateX(0)}

/* Cards */
.card{background:var(--card-bg);border-radius:var(--card-radius);box-shadow:var(--shadow-soft);overflow:hidden;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.card-img{transition:transform .6s var(--ease-out)}
.card:hover .card-img{transform:scale(1.06)}

/* Film-grain + paper texture overlay */
.grain::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E")}

/* Scrim for hero text legibility */
.hero-scrim{background:linear-gradient(180deg,rgba(10,58,69,.30) 0%,rgba(10,58,69,.15) 40%,rgba(10,58,69,.62) 100%)}

/* Hero slider crossfade */
.slide{opacity:0;transition:opacity 1.1s var(--ease-out);transform:scale(1.06)}
.slide.active{opacity:1;transform:scale(1)}
.slide img{will-change:transform}

/* Scroll-reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}.reveal[data-delay="4"]{transition-delay:.32s}

/* Horizontal snap gallery */
.snap-row{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.snap-row>*{scroll-snap-align:start}
.snap-row::-webkit-scrollbar{height:6px}.snap-row::-webkit-scrollbar-thumb{background:var(--sand-300);border-radius:999px}

/* Decorative wavy divider */
.edge-wave{display:block;width:100%;height:auto}

/* Floating contact buttons */
.fab{box-shadow:var(--shadow-lift);transition:transform var(--dur) var(--ease-out)}
.fab:hover{transform:translateY(-3px) scale(1.04)}

/* Menu */
.menu-cat{break-inside:avoid}
.menu-item{display:flex;gap:.75rem;align-items:baseline;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--color-line)}
.menu-dots{flex:1;border-bottom:1px dotted var(--color-line);transform:translateY(-.25rem);margin:0 .25rem}
.menu-price{font-variant-numeric:tabular-nums;font-weight:700;color:var(--sea-800);white-space:nowrap}

/* Menu category tabs (sticky, scrollable) */
.menu-tabs{scrollbar-width:none}
.menu-tabs::-webkit-scrollbar{display:none}
.menu-tab{white-space:nowrap;font-weight:600;font-size:.85rem;color:var(--sea-800);background:var(--sand-200);border-radius:999px;padding:.45rem .9rem;line-height:1;transition:background var(--dur),color var(--dur)}
.menu-tab:hover{background:var(--sand-300)}
.menu-tab.active{background:var(--terracotta-500);color:#fff}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .slide{opacity:1;transform:none}
}