@charset "UTF-8";

/* Websiteks Interaction Engine — Phase 1 + Phase 2 */

:root {
  --wks-motion-fast: 180ms;
  --wks-motion-base: 320ms;
  --wks-motion-slow: 720ms;
  --wks-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wks-ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --wks-cursor-size: 18px;
  --wks-cursor-expanded: 72px;
  --wks-spotlight-x: 50%;
  --wks-spotlight-y: 50%;
}

[data-wks-cursor] {
  --wks-cursor-opacity: 0;
}

.wks-cursor {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: var(--wks-cursor-size);
  height: var(--wks-cursor-size);
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: var(--wks-cursor-opacity);
  color: currentColor;
  pointer-events: none;
  mix-blend-mode: difference;
  transition:
    width var(--wks-motion-base) var(--wks-ease-out),
    height var(--wks-motion-base) var(--wks-ease-out),
    opacity var(--wks-motion-fast) ease,
    background-color var(--wks-motion-base) ease;
  will-change: transform, width, height;
}

.wks-cursor::after {
  position: absolute;
  inset: 50% auto auto 50%;
  max-width: calc(var(--wks-cursor-expanded) - 12px);
  transform: translate(-50%, -50%);
  overflow: hidden;
  color: inherit;
  content: attr(data-label);
  font: 700 10px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.05em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wks-cursor.is-visible {
  --wks-cursor-opacity: 1;
}

.wks-cursor.is-expanded {
  width: var(--wks-cursor-expanded);
  height: var(--wks-cursor-expanded);
  background: currentColor;
}

.wks-cursor.is-expanded::after {
  color: Canvas;
  mix-blend-mode: normal;
}

[data-magnetic] {
  --wks-magnetic-x: 0px;
  --wks-magnetic-y: 0px;
  transform: translate3d(var(--wks-magnetic-x), var(--wks-magnetic-y), 0);
  transition: transform var(--wks-motion-base) var(--wks-ease-out);
  will-change: transform;
}

[data-magnetic].is-wks-active {
  transition-duration: 80ms;
}

[data-tilt] {
  --wks-tilt-x: 0deg;
  --wks-tilt-y: 0deg;
  --wks-glare-x: 50%;
  --wks-glare-y: 50%;
  position: relative;
  transform:
    perspective(900px)
    rotateX(var(--wks-tilt-x))
    rotateY(var(--wks-tilt-y));
  transform-style: preserve-3d;
  transition: transform var(--wks-motion-base) var(--wks-ease-out);
  will-change: transform;
}

[data-tilt]::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at var(--wks-glare-x) var(--wks-glare-y),
      rgba(255,255,255,0.16),
      transparent 38%
    );
  opacity: 0;
  pointer-events: none;
  content: "";
  transition: opacity var(--wks-motion-base) ease;
}

[data-tilt].is-wks-active::after {
  opacity: 1;
}

[data-spotlight] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

[data-spotlight]::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(
      460px circle at var(--wks-spotlight-x) var(--wks-spotlight-y),
      rgba(255,255,255,0.12),
      transparent 44%
    );
  opacity: 0;
  pointer-events: none;
  content: "";
  transition: opacity var(--wks-motion-base) ease;
}

[data-spotlight].is-wks-active::before {
  opacity: 1;
}

[data-ripple] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.wks-ripple {
  position: absolute;
  z-index: -1;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: currentColor;
  opacity: 0.14;
  pointer-events: none;
  animation: wks-ripple 620ms var(--wks-ease-out) forwards;
}

[data-reveal],
[data-stagger-item] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--wks-motion-slow) var(--wks-ease-out),
    transform var(--wks-motion-slow) var(--wks-ease-out);
  transition-delay: var(--wks-reveal-delay, 0ms);
}

[data-reveal="left"] {
  transform: translate3d(-24px, 0, 0);
}

[data-reveal="right"] {
  transform: translate3d(24px, 0, 0);
}

[data-reveal="scale"] {
  transform: scale(0.97);
}

[data-reveal].is-wks-visible,
[data-stagger-item].is-wks-visible {
  opacity: 1;
  transform: none;
}

[data-parallax-pointer] {
  position: relative;
}

[data-parallax-layer] {
  --wks-parallax-x: 0px;
  --wks-parallax-y: 0px;
  transform: translate3d(var(--wks-parallax-x), var(--wks-parallax-y), 0);
  transition: transform 90ms linear;
  will-change: transform;
}

[data-scroll-progress] {
  transform: scaleX(var(--wks-scroll-progress, 0));
  transform-origin: left center;
  will-change: transform;
}

[data-header-compact] {
  transition:
    padding var(--wks-motion-base) var(--wks-ease-out),
    background-color var(--wks-motion-base) ease,
    border-color var(--wks-motion-base) ease,
    box-shadow var(--wks-motion-base) ease;
}

@keyframes wks-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.18;
  }
  70% {
    opacity: 0.09;
  }
  100% {
    transform: translate(-50%, -50%) scale(24);
    opacity: 0;
  }
}

@media (hover: none), (pointer: coarse) {
  .wks-cursor {
    display: none !important;
  }

  [data-magnetic],
  [data-tilt],
  [data-parallax-layer] {
    transform: none !important;
  }

  [data-tilt]::after,
  [data-spotlight]::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wks-cursor {
    display: none !important;
  }

  [data-magnetic],
  [data-tilt],
  [data-parallax-layer] {
    transform: none !important;
    transition: none !important;
  }

  [data-reveal],
  [data-stagger-item] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-tilt]::after,
  [data-spotlight]::before {
    display: none !important;
  }

  .wks-ripple {
    display: none !important;
    animation: none !important;
  }
}

/* Phase 2 — navigation and page transitions */

body.is-wks-menu-open {
  overflow: hidden;
}

[data-curtain-menu] {
  position: fixed;
  z-index: 9000;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--wks-curtain-bg, #151815);
  color: var(--wks-curtain-text, #f4f0e7);
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  transition:
    clip-path 440ms var(--wks-ease-out),
    opacity var(--wks-motion-fast) ease;
}

[data-curtain-menu].is-open {
  opacity: 1;
  clip-path: inset(0);
  pointer-events: auto;
}

[data-curtain-item] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 520ms var(--wks-ease-out),
    transform 520ms var(--wks-ease-out);
  transition-delay: calc(90ms + (var(--wks-menu-index, 0) * 64ms));
}

[data-curtain-menu].is-open [data-curtain-item] {
  opacity: 1;
  transform: none;
}

[data-curtain-backdrop] {
  cursor: pointer;
}

[data-nav-preview] {
  --wks-preview-opacity: 0.72;
}

[data-nav-preview-image] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--wks-preview-opacity);
  transform: scale(1.035);
  transition:
    opacity 260ms ease,
    transform 560ms var(--wks-ease-out),
    filter 320ms ease;
}

[data-nav-preview].is-preview-active [data-nav-preview-image],
[data-nav-preview-image].is-preview-ready {
  --wks-preview-opacity: 1;
  transform: scale(1);
}

[data-nav-preview-src] {
  transition:
    opacity var(--wks-motion-fast) ease,
    color var(--wks-motion-fast) ease,
    transform var(--wks-motion-base) var(--wks-ease-out);
}

[data-nav-preview-src].is-preview-current {
  transform: translate3d(8px, 0, 0);
}

[data-scroll-theme-root] {
  transition:
    background-color 700ms var(--wks-ease-out),
    color 700ms var(--wks-ease-out),
    border-color 700ms var(--wks-ease-out);
}

[data-scroll-theme-root][data-wks-theme="dark"] {
  --wks-theme-bg: #151815;
  --wks-theme-text: #f4f0e7;
}

[data-scroll-theme-root][data-wks-theme="light"] {
  --wks-theme-bg: #f4f0e7;
  --wks-theme-text: #232620;
}

[data-scroll-theme-root][data-wks-theme="stone"] {
  --wks-theme-bg: #d8d0c3;
  --wks-theme-text: #252822;
}

[data-scroll-theme-root][data-wks-theme] {
  background-color: var(--wks-theme-bg, inherit);
  color: var(--wks-theme-text, inherit);
}

[data-section-nav] a {
  transition:
    color var(--wks-motion-fast) ease,
    opacity var(--wks-motion-fast) ease,
    transform var(--wks-motion-base) var(--wks-ease-out);
}

[data-section-nav] a[aria-current="location"],
[data-section-nav] a.is-active {
  opacity: 1;
  transform: translate3d(4px, 0, 0);
}


.wks-page-mask {
  position: fixed;
  z-index: 10001;
  inset: 0;
  transform: scaleY(0);
  transform-origin: center bottom;
  background: var(--wks-transition-color, #111411);
  pointer-events: none;
  will-change: transform;
}

.wks-page-mask.is-entering {
  transform: scaleY(1);
  transform-origin: center top;
  transition: none;
}

.wks-page-mask.is-entering.is-ready {
  transform: scaleY(0);
  transition: transform 460ms var(--wks-ease-out);
}

.wks-page-mask.is-covering {
  transform: scaleY(1);
  transform-origin: center bottom;
  transition: transform 420ms var(--wks-ease-out);
  pointer-events: auto;
}

.wks-transition-clone {
  overflow: hidden !important;
  border-radius: inherit;
  box-shadow: 0 24px 80px rgba(0,0,0,0.18);
  object-fit: cover;
  will-change: transform, opacity;
}

.wks-transition-clone img,
img.wks-transition-clone,
picture.wks-transition-clone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.is-wks-navigating {
  cursor: progress;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation:
    320ms var(--wks-ease-out) both wks-view-old;
}

::view-transition-new(root) {
  animation:
    440ms var(--wks-ease-out) both wks-view-new;
}

@keyframes wks-view-old {
  to {
    opacity: 0;
    transform: scale(0.992);
  }
}

@keyframes wks-view-new {
  from {
    opacity: 0;
    transform: scale(1.008);
  }
}

@media (hover: none), (pointer: coarse) {
  [data-nav-preview-src].is-preview-current {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-curtain-menu] {
    transition: none !important;
  }

  [data-curtain-menu].is-open {
    clip-path: inset(0) !important;
  }

  [data-curtain-item] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-nav-preview-image],
  [data-nav-preview-src],
  [data-scroll-theme-root],
  [data-section-nav] a {
    transition: none !important;
  }

  .wks-page-mask,
  .wks-transition-clone {
    display: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms !important;
  }
}



/* Phase 3 — Gallery, comparison and SVG primitives */

[data-drag-gallery] {
  position: relative;
}

[data-gallery-track] {
  display: flex;
  gap: var(--wks-gallery-gap, 18px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  cursor: grab;
}

[data-gallery-track]::-webkit-scrollbar {
  display: none;
}

[data-gallery-track].is-gallery-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

[data-gallery-item] {
  flex: 0 0 var(--wks-gallery-item-width, min(78vw, 620px));
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transition:
    opacity var(--wks-motion-base) ease,
    transform var(--wks-motion-base) var(--wks-ease-out);
}

[data-gallery-item].is-gallery-current {
  opacity: 1;
}

[data-gallery-prev]:disabled,
[data-gallery-next]:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.wks-gallery-status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

[data-before-after] {
  --wks-compare: 50%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

[data-before-after] > [data-before-after-top] {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}

[data-before-after] > [data-before-after-top] > img,
[data-before-after] > [data-before-after-bottom] > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-before-after-divider] {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: currentColor;
  pointer-events: none;
}

[data-before-after-divider]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid currentColor;
  border-radius: 50%;
  background: Canvas;
  color: CanvasText;
  content: "↔";
  font: 700 15px/1 sans-serif;
}

[data-before-after-range] {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

[data-before-after-range]:focus-visible + [data-before-after-focus-ring],
[data-before-after]:focus-within [data-before-after-focus-ring] {
  opacity: 1;
}

[data-before-after-focus-ring] {
  position: absolute;
  z-index: 5;
  inset: 4px;
  border: 2px solid Highlight;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

[data-svg-draw] {
  transition: stroke-dashoffset var(--wks-svg-duration, 900ms) var(--wks-ease-out);
}

[data-svg-draw].is-wks-drawn {
  stroke-dashoffset: 0 !important;
}

[data-svg-morph] [data-morph-path] {
  will-change: d;
}

[data-svg-morph][data-morph-invalid] {
  opacity: 0.72;
}

[data-svg-mask-scroll] {
  --wks-svg-mask-progress: 0;
}

@media (hover: hover) and (pointer: fine) {
  [data-gallery-item]:not(.is-gallery-current) {
    opacity: 0.72;
    transform: scale(0.985);
  }
}

@media (hover: none), (pointer: coarse) {
  [data-gallery-track] {
    cursor: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-gallery-track] {
    scroll-behavior: auto !important;
  }

  [data-gallery-item] {
    transition: none !important;
    transform: none !important;
  }

  [data-svg-draw] {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}


/* Phase 4 — Canvas / generative layer */

[data-canvas-particles],
[data-canvas-grain],
[data-canvas-network],
[data-motion-scope] {
  position: relative;
  isolation: isolate;
}

.wks-generative-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

[data-canvas-particles] > :not(.wks-generative-canvas),
[data-canvas-grain] > :not(.wks-generative-canvas),
[data-canvas-network] > :not(.wks-generative-canvas) {
  position: relative;
  z-index: 1;
}

.wks-grain-canvas {
  mix-blend-mode: soft-light;
  opacity: var(--wks-grain-opacity, 0.65);
}

.wks-particle-canvas,
.wks-network-canvas {
  opacity: var(--wks-canvas-opacity, 1);
}

[data-pointer-velocity] {
  --wks-velocity-x: 0;
  --wks-velocity-y: 0;
  --wks-velocity-mag: 0;
  --wks-velocity-skew: 0;
}

[data-pointer-velocity-layer] {
  transform:
    translate3d(
      calc(var(--wks-velocity-x) * 1px),
      calc(var(--wks-velocity-y) * 1px),
      0
    )
    skewX(calc(var(--wks-velocity-skew) * 1deg));
  transition: transform 90ms linear;
  will-change: transform;
}

[data-motion-toggle][disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.is-wks-motion-paused .wks-generative-canvas {
  opacity: var(--wks-canvas-paused-opacity, 0.72);
}

@media (hover: none), (pointer: coarse) {
  [data-pointer-velocity-layer] {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pointer-velocity-layer] {
    transform: none !important;
    transition: none !important;
  }

  .wks-generative-canvas {
    opacity: var(--wks-canvas-reduced-opacity, 0.55);
  }
}


/* Zeytinbahçe Interaction Preset — calm editorial */
.wks-site-progress {
  position: fixed;
  z-index: 5000;
  inset: 0 0 auto;
  height: 2px;
  background: var(--color-brass-light);
  pointer-events: none;
  transform-origin: left center;
}

.wks-cursor {
  color: var(--color-parchment-strong);
}

.site-header.is-compact {
  border-color: rgba(244, 239, 230, 0.18);
  background: rgba(21, 26, 20, 0.985);
  box-shadow: 0 0.75rem 2.5rem rgba(8, 10, 7, 0.2);
}

.site-header.is-compact .brand__mark {
  transform: scale(0.9);
  transition: transform var(--duration-base) var(--ease-standard);
}

.site-header.is-compact .header-reservation {
  padding-inline: 1rem;
}

.dish-card[data-tilt],
.seating-preview[data-tilt] {
  transform-origin: center center;
}

.dish-card[data-tilt] .media-frame,
.seating-preview[data-tilt] .media-frame {
  transform: translateZ(12px);
}

.producer-card[data-spotlight],
.contact-card[data-spotlight],
.tasting-preview[data-spotlight],
.hours-panel[data-spotlight] {
  isolation: isolate;
}

@media (prefers-reduced-motion: reduce) {
  .wks-site-progress { display: none; }
}