/* ============================================================
   CASA FLOW IBIZA — Shared Styles
   ============================================================ */

/* ----- Cross-Document View Transitions ---------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Persistent elements: morph across navigations, don't cross-fade */
#site-header {
  view-transition-name: site-header;
}

#bottom-nav {
  view-transition-name: bottom-nav;
}

/* Default transition: elegant cross-fade with slight vertical shift */
::view-transition-old(root) {
  animation: 0.35s cubic-bezier(0.4, 0, 0.2, 1) both vt-fade-out;
}

::view-transition-new(root) {
  animation: 0.35s cubic-bezier(0.4, 0, 0.2, 1) both vt-fade-in;
}

@keyframes vt-fade-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes vt-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Directional slide transitions */
::view-transition-group(root) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Forward: content slides left (new content from right) */
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-out-left;
}

html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-in-right;
}

/* Backward: content slides right (new content from left) */
html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-out-right;
}

html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-in-left;
}

@keyframes slide-out-left {
  to {
    transform: translateX(-15%);
    opacity: 0;
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(30%);
    opacity: 0;
  }
}

@keyframes slide-out-right {
  to {
    transform: translateX(15%);
    opacity: 0;
  }
}

@keyframes slide-in-left {
  from {
    transform: translateX(-30%);
    opacity: 0;
  }
}

/* Keep persistent elements stable during page transitions */
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(bottom-nav),
::view-transition-new(bottom-nav) {
  animation: none;
}

/* ----- Base Styles ------------------------------------------ */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: max(884px, 100dvh);
}

/* Grain / Texture Overlay */
.grain-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: 0.03;
  background-image: url("https://www.transparenttextures.com/patterns/p6.png");
}

/* Material Symbols Defaults */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ----- Scroll Reveal Animations ----------------------------- */
.fade-in-section,
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in-section.visible,
.reveal-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Parallax Hero ---------------------------------------- */
.parallax-hero {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ----- Image Hover Zoom ------------------------------------- */
.image-hover-zoom img {
  transition: transform 1.2s ease-out;
}

.image-hover-zoom:hover img {
  transform: scale(1.05);
}

/* ----- Input Underline Animation (Request page) ------------- */
.input-underline {
  position: relative;
}

.input-underline::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: #5f5e5b;
  transition: width 0.6s ease;
}

.input-underline:focus-within::after {
  width: 100%;
}

/* ----- Gallery Item Interactions ----------------------------- */
.gallery-item {
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.gallery-item:hover {
  filter: saturate(0.8) contrast(1.05);
}

.caption-overlay {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.gallery-item.active .caption-overlay {
  opacity: 1;
}

/* ----- Custom Scrollbar ------------------------------------- */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #c8c7be;
  border-radius: 10px;
}

/* ----- Keyframe Animations (Landing hero) ------------------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ----- Utility --------------------------------------------- */
.vertical-rl {
  writing-mode: vertical-rl;
}

/* ----- Navigation Drawer ------------------------------------ */
#nav-drawer {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#nav-drawer.open {
  transform: translateX(0) !important;
}

/* ----- Active Navigation States ------------------------------ */

/* 1. Header Desktop Navigation (.nav-link) */
.nav-link {
  position: relative;
}

body[data-page="portal"] .nav-link[data-page="portal"]::after,
body[data-page="alchemy"] .nav-link[data-page="alchemy"]::after,
body[data-page="gallery"] .nav-link[data-page="gallery"]::after,
body[data-page="request"] .nav-link[data-page="request"]::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentColor;
}

body[data-page="portal"] .nav-link[data-page="portal"],
body[data-page="alchemy"] .nav-link[data-page="alchemy"],
body[data-page="gallery"] .nav-link[data-page="gallery"],
body[data-page="request"] .nav-link[data-page="request"] {
  color: #191d0e; /* text-on-surface */
}

/* White text for active state on dark heroes (when not scrolled/hovered) */
body[data-page="portal"] .header-hero:not(.header-scrolled):not(:hover) .nav-link[data-page="portal"],
body[data-page="gallery"] .header-hero:not(.header-scrolled):not(:hover) .nav-link[data-page="gallery"] {
  color: #fff; 
}

/* 2. Drawer Navigation (.drawer-link) */
.drawer-link {
  position: relative;
}

body[data-page="portal"] .drawer-link[data-page="portal"],
body[data-page="alchemy"] .drawer-link[data-page="alchemy"],
body[data-page="gallery"] .drawer-link[data-page="gallery"],
body[data-page="request"] .drawer-link[data-page="request"] {
  color: #191d0e;
  padding-left: 1rem;
}

body[data-page="portal"] .drawer-link[data-page="portal"]::before,
body[data-page="alchemy"] .drawer-link[data-page="alchemy"]::before,
body[data-page="gallery"] .drawer-link[data-page="gallery"]::before,
body[data-page="request"] .drawer-link[data-page="request"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

/* 3. Bottom Mobile Navigation (.bottom-nav-link) */
.bottom-nav-link {
  color: #787770; /* text-outline */
}

body[data-page="portal"] .bottom-nav-link[data-page="portal"],
body[data-page="alchemy"] .bottom-nav-link[data-page="alchemy"],
body[data-page="gallery"] .bottom-nav-link[data-page="gallery"],
body[data-page="request"] .bottom-nav-link[data-page="request"] {
  color: #191d0e;
}

body[data-page="portal"] .bottom-nav-link[data-page="portal"] .material-symbols-outlined,
body[data-page="alchemy"] .bottom-nav-link[data-page="alchemy"] .material-symbols-outlined,
body[data-page="gallery"] .bottom-nav-link[data-page="gallery"] .material-symbols-outlined,
body[data-page="request"] .bottom-nav-link[data-page="request"] .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}