/* ============================================================
   animations.css
   Elegant, modern animations — imported non-destructively.
   Does NOT override any existing styles.
   ============================================================ */

/* Hero stats satırını gizle */
.hero-stats { display: none !important; }

/* ---------- Global animation easing tokens ---------- */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================================
   1. REVEAL — replace the simple opacity/translateY with
   a richer version that also supports directional variants.
   We ADD to the existing .reveal behaviour; not replace it.
   ======================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  .75s var(--ease-out-expo),
    transform .75s var(--ease-out-expo);
  will-change: opacity, transform;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Directional stagger variants (add class alongside .reveal) */
.reveal-left  { transform: translateX(-36px) !important; }
.reveal-right { transform: translateX( 36px) !important; }
.reveal-scale { transform: scale(0.94) !important; }

.reveal-left.in-view,
.reveal-right.in-view,
.reveal-scale.in-view {
  transform: translateX(0) scale(1) !important;
}

/* Stagger delays for child lists */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: .1s; }
.stagger > *:nth-child(3) { transition-delay: .2s; }
.stagger > *:nth-child(4) { transition-delay: .3s; }
.stagger > *:nth-child(5) { transition-delay: .4s; }
.stagger > *:nth-child(6) { transition-delay: .5s; }
.stagger > *:nth-child(7) { transition-delay: .6s; }
.stagger > *:nth-child(8) { transition-delay: .7s; }

/* ========================================================
   2. HERO — Animated gradient shimmer background + subtle
   floating particle layer (no images, pure CSS).
   ======================================================== */
.hero {
  background-image:
    linear-gradient(180deg,
      rgba(8, 42, 68, .76) 0%,
      rgba(8, 42, 68, .52) 40%,
      rgba(8, 42, 68, .88) 100%
    ),
    linear-gradient(120deg, #082a44 0%, #0f4c75 50%, #082a44 100%);
  background-size: 100% 100%, 300% 300%;
  animation: hero-gradient-shift 14s ease-in-out infinite;
}

@keyframes hero-gradient-shift {
  0%   { background-position: 0% 50%, 0%   50%; }
  50%  { background-position: 0% 50%, 100% 50%; }
  100% { background-position: 0% 50%, 0%   50%; }
}

/* Hero content: entrance from below with a slight spring */
.hero .hero-inner {
  animation: hero-entrance .9s var(--ease-out-expo) both;
}

@keyframes hero-entrance {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero badge subtle pulse ring */
.hero-badge {
  animation: badge-pulse 4s ease-in-out infinite;
  position: relative;
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(228, 200, 148, 0); }
  50%       { box-shadow: 0 0 0 6px rgba(228, 200, 148, .14); }
}

/* Hero stats counter number pop-in */
.hero-stat strong {
  display: inline-block;
  animation: stat-pop .6s var(--ease-spring) both;
}
.hero-stat:nth-child(1) strong { animation-delay: .5s; }
.hero-stat:nth-child(2) strong { animation-delay: .65s; }
.hero-stat:nth-child(3) strong { animation-delay: .8s; }

@keyframes stat-pop {
  from { opacity: 0; transform: scale(.7) translateY(10px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* Wave divider at hero bottom — continuous gentle motion */
.wave-divider svg path {
  transform-origin: center bottom;
  animation: wave-breathe 8s ease-in-out infinite;
}

@keyframes wave-breathe {
  0%, 100% { d: path("M0,64 C240,120 480,0 720,48 C960,96 1200,16 1440,64 L1440,120 L0,120 Z"); }
  50%       { d: path("M0,80 C240,20 480,110 720,52 C960,16 1200,100 1440,56 L1440,120 L0,120 Z"); }
}

/* ========================================================
   3. NAV — Smooth transition already in place; augment with
   a very subtle entry-from-top.
   ======================================================== */
.nav {
  animation: nav-enter .6s var(--ease-out-expo) both;
}

@keyframes nav-enter {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========================================================
   4. FEATURE CARDS — tilt on hover (JS-free, pure CSS 3D)
   ======================================================== */
.feature-card {
  transition:
    background .3s ease,
    transform .35s var(--ease-out-expo),
    box-shadow .35s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -15px rgba(8, 42, 68, .18);
}

.feature-icon {
  transition: transform .4s var(--ease-spring);
}

.feature-card:hover .feature-icon {
  transform: rotate(-8deg) scale(1.12);
}

/* ========================================================
   5. MENU TABS — underline slide indicator
   ======================================================== */
.menu-tab {
  position: relative;
  overflow: hidden;
}

.menu-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy-900, #082a44);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out-expo), opacity .35s ease;
  border-radius: 2px 2px 0 0;
}

.menu-tab:hover::before {
  transform: scaleX(1);
  opacity: .04;
}

/* Menu panel cross-fade */
.menu-panel {
  animation: none;
}

.menu-panel.active {
  animation: panel-in .45s var(--ease-out-expo) both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Menu items — staggered slide-in when panel becomes active */
.menu-panel.active .menu-item {
  animation: item-slide-in .5s var(--ease-out-expo) both;
}

.menu-panel.active .menu-item:nth-child(1) { animation-delay: 0s; }
.menu-panel.active .menu-item:nth-child(2) { animation-delay: .06s; }
.menu-panel.active .menu-item:nth-child(3) { animation-delay: .12s; }
.menu-panel.active .menu-item:nth-child(4) { animation-delay: .18s; }
.menu-panel.active .menu-item:nth-child(5) { animation-delay: .24s; }
.menu-panel.active .menu-item:nth-child(6) { animation-delay: .30s; }
.menu-panel.active .menu-item:nth-child(7) { animation-delay: .36s; }
.menu-panel.active .menu-item:nth-child(8) { animation-delay: .42s; }

@keyframes item-slide-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Dotted line between dish name and price: animated expand */
.menu-item-top .dots {
  transition: flex 1s var(--ease-out-expo);
}

.menu-item {
  transition: background .2s ease, padding-left .25s ease;
}

.menu-item:hover {
  padding-left: 8px;
  background: rgba(185, 137, 63, .04);
}

/* ========================================================
   6. GALLERY ITEMS — smooth scale + overlay reveal
   ======================================================== */
.g-item {
  overflow: hidden;
  transition:
    transform .4s var(--ease-out-expo),
    box-shadow .4s ease,
    border-color .3s ease;
}

.g-item:hover {
  transform: scale(1.03);
  box-shadow: 0 18px 36px -10px rgba(8, 42, 68, .22);
  border-color: var(--gold, #b9893f);
  z-index: 2;
}

.g-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 42, 68, 0);
  transition: background .3s ease;
  pointer-events: none;
}

.g-item:hover::after {
  background: rgba(8, 42, 68, .06);
}

/* ========================================================
   7. CONTACT SOCIAL ICONS — spin on hover
   ======================================================== */
.contact-social a {
  transition:
    background .25s ease,
    border-color .25s ease,
    transform .4s var(--ease-spring);
}

.contact-social a:hover {
  transform: scale(1.15) rotate(8deg);
}

/* ========================================================
   8. FOOTER LINKS — underline draw
   ======================================================== */
.footer-links a {
  position: relative;
  display: inline-block;
  transition: color .25s ease;
}

.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--gold-soft, #e4c894);
  transition: width .3s var(--ease-out-expo);
}

.footer-links a:hover::after {
  width: 100%;
}

/* ========================================================
   9. STORY MEDIA — subtle floating parallax placeholder
   ======================================================== */
.story-media {
  transition:
    transform .5s var(--ease-out-expo),
    box-shadow .5s ease;
}

.story-media:hover {
  transform: translateY(-6px) rotate(.4deg);
  box-shadow: 0 28px 56px -20px rgba(8, 42, 68, .25);
}

/* Story frame hairline expand on hover */
.story-frame {
  transition: inset .45s var(--ease-out-expo);
}

.story-media:hover .story-frame {
  inset: 10px;
}

/* ========================================================
   10. BUTTONS — refined hover lift + glow
   ======================================================== */
.btn-solid {
  transition:
    background .25s ease,
    transform .3s var(--ease-spring),
    box-shadow .3s ease;
}

.btn-solid:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -8px rgba(15, 76, 117, .45);
}

.btn-ghost {
  transition:
    background .25s ease,
    border-color .25s ease,
    transform .3s var(--ease-spring);
}

.btn-ghost:hover {
  transform: translateY(-3px);
}

.btn-outline-navy {
  transition:
    background .25s ease,
    color .25s ease,
    transform .3s var(--ease-spring),
    box-shadow .3s ease;
}

.btn-outline-navy:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -8px rgba(15, 76, 117, .3);
}

/* ========================================================
   11. MEANDER STRIP — very slow drift
   ======================================================== */
.meander-strip rect {
  animation: meander-drift 40s linear infinite;
  transform-box: fill-box;
}

@keyframes meander-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-24px); }
}

/* ========================================================
   12. PAGE LOADER — one-time entrance curtain
   ======================================================== */
#page-loader {
  position: fixed;
  inset: 0;
  background: #082a44;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: loader-exit 1.4s var(--ease-in-out-quart) 1s both;
}

#page-loader .loader-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
}

.loader-wave {
  position: absolute;
  left: 0; right: 0; bottom: 1px;
  height: 12vh;
  min-height: 80px;
  transform: translateY(100%) scaleY(-1);
  overflow: visible;
}
.loader-wave svg { width: 100%; height: 100%; display: block; }
.loader-wave use { animation: move-waves 12s linear infinite; }
.loader-wave use:nth-child(1) { animation-delay: -2s; animation-duration: 16s; }
.loader-wave use:nth-child(2) { animation-delay: -3s; animation-duration: 22s; }
.loader-wave use:nth-child(3) { animation-delay: -4s; animation-duration: 28s; }

@keyframes loader-exit {
  from { transform: translateY(0); }
  to   { transform: translateY(-120vh); visibility: hidden; }
}

#page-loader .loader-logo {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: #fff;
  letter-spacing: .12em;
  opacity: 0;
  animation: loader-text-in .5s var(--ease-out-expo) .1s both;
}

#page-loader .loader-bar-track {
  width: 120px;
  height: 1px;
  background: rgba(255,255,255,.2);
  position: relative;
  overflow: hidden;
}

#page-loader .loader-bar-fill {
  position: absolute;
  left: -100%;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--gold, #b9893f);
  animation: loader-bar .7s var(--ease-out-expo) .15s both;
}

#page-loader .loader-sub {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  opacity: 0;
  animation: loader-text-in .5s ease .3s both;
}

@keyframes loader-text-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes loader-bar {
  from { left: -100%; }
  to   { left: 0; }
}

/* ========================================================
   13. EYEBROW — sliding line entrance
   ======================================================== */
.eyebrow::before {
  animation: none;
  transition: width .6s var(--ease-out-expo);
}

.in-view .eyebrow::before,
.eyebrow::before {
  width: 26px;
}

/* ========================================================
   14. SCROLL TO TOP BUTTON
   ======================================================== */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(8, 42, 68, 0.2);
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(228, 200, 148, 0.15);
}

.scroll-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-to-top:hover {
  background: var(--navy-800);
  box-shadow: 0 6px 16px rgba(8, 42, 68, 0.3);
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .scroll-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}