body {
  margin: 0;
  background: #000;
  overflow: hidden;
  perspective: 2000px;
  font-family: Arial, sans-serif;
}


.card-container {
  position: relative;
  width: 100%;
  height: 100vh;
  transform-style: preserve-3d;
  /* Tilted to look from above */
  transform: rotateX(-35deg) rotateY(-15deg);
  transform-origin: center center;
  perspective: 2000px;
}
.card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 650px;
  height: 350px;
  transform: translate(-50%, -50%);
  transition: box-shadow 0.3s ease;
}
/* Instead, create an "active" class that script.js will toggle */
.card.active {
  z-index: 999;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}




.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}



/* Video Modal */
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.video-modal video {
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
}

#closeModal {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 3rem;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
}
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.modal video {
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
}
#closeModal {
  position: absolute;
  top: 30px;
  right: 50px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}





/* === VIRTUAL SCROLL CAMERA (append at end) === */
html, body {
  height: 100%;
  overflow: hidden;            /* stop real scrolling */
}

#camera-rig {
  position: fixed;
  inset: 0;
  perspective: 2000px;         /* same depth as your scene */
  pointer-events: none;        /* clicks go to children */
  z-index: 10;
}

/* keep your existing container interactive & tilted inside the rig */
#camera-rig .card-container {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: auto;
}
/* === Uniform look override === */

/* === Gabriel-Veres style: big, glossy, shadowed cards === */
.card {
  width: 900px;                 /* larger like the reference */
  height: 520px;
  transform: translate(-50%, -50%);     /* keep your centering */
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 30px 90px rgba(0,0,0,0.65),
    0 10px 30px rgba(0,0,0,0.35);
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #111;             /* nice fallback if an img is missing */
}

/* subtle “gloss” and bottom fade */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0) 35%) ,
    linear-gradient( to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.45) );
  pointer-events: none;
}

/* keep perspective ONLY on #camera-rig to avoid zoomy feeling */
body { perspective: none; }                 /* remove earlier perspective */
.card-container { perspective: none; }      /* keep only the tilt */
#camera-rig { perspective: 2000px; }        /* single perspective context */

/* remove these two perspectives */
body { margin:0; background:#000; overflow:hidden; font-family:Arial,sans-serif; }     /* no perspective here */
.card-container {
  position:relative; width:100%; height:100vh;
  transform-style:preserve-3d;
  transform: rotateX(-35deg) rotateY(-15deg);
  transform-origin:center center;
  /* no perspective here */
}

/* keep the rig’s perspective (already present at bottom of your css) */
#camera-rig { perspective: 2000px; }
/* === Card size (smaller) === */
.card {
  width: 600px;                 /* was 900px */
  height: 340px;                /* was 520px */
  transform: translate(-50%, -50%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.30);
}
/* isolate hover transforms on a child */
.card {
  /* parent keeps scene/layout transforms */
  transform: translate(-50%, -50%);
}

.card-inner {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: translate3d(0,0,0) scale(1);
  transition: box-shadow 0.3s ease;
}

/* optional: shadow only for the hovered card */
.card.hovering { z-index: 999; }
.card.hovering .card-inner {
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

/* Card cover image styling */
.card-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.card-cover:hover {
  transform: scale(1.02);
}

/* Video embed styling */
.video-embed {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 14px;
}

/* Make sure cards can contain videos properly */
.card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 450px;                 /* Adjusted from 500px to better fit PNG proportions */
  height: 550px;                /* Adjusted from 400px to better fit PNG proportions */
  transform: translate(-50%, -50%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.30);
  /* Ensure no unwanted rotations */
  transform-style: preserve-3d;
  backface-visibility: visible;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Video Modal */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(10px);
}

#modalContent {
  width: 90vw;
  height: 85vh;
  max-width: 1400px;
  max-height: 900px;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 25px 100px rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.1);
}

#modalVideo {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: #000;
}

#modalVideo iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 15px;
  background: #000;
}

/* Video Controls Overlay */
.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal:hover .video-controls {
  opacity: 1;
}

#closeModal {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 35px;
  color: white;
  cursor: pointer;
  z-index: 10000;
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#closeModal:hover {
  background: rgba(255,0,0,0.8);
  transform: scale(1.1);
}

/* Fullscreen button */
.fullscreen-btn {
  position: absolute;
  top: 20px;
  right: 80px;
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.fullscreen-btn:hover {
  background: rgba(255,255,255,0.2);
}

/* Loading indicator */
#videoLoading {
  background: rgba(0,0,0,0.8);
  padding: 15px 25px;
  border-radius: 25px;
  border: 1px solid rgba(255,255,255,0.2);
}

/* Scroll spacer for the 3D effect */
#scroll-spacer { 
  height: 300vh; 
}

/* Card portal for dynamic content */
#card-portal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}


.intro-text {
  position: relative;          /* keep it static on screen */
  top: 40px;                /* distance from top */
  left: 40px;               /* distance from left */
  width: 420px;             /* narrower for readability */
  color: #fff;
  font-size: 18px;
  line-height: 1.8;
  background: rgba(0,0,0,0.65);
  padding: 20px 25px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.6);
  direction: rtl;
  text-align: right;
  z-index: 10000;           /* make sure it stays above the cards */
}

.intro-text a {
  color: #00e6ff;
  font-weight: bold;
  text-decoration: none;
}

.intro-text a:hover {
  text-decoration: underline;
}
.intro-text {
  font-family: 'Vazirmatn', Arial, sans-serif;
}
/* Container already has dir="rtl" in your HTML; keep it */


.intro-text p {
  text-align: justify;            /* main justification */
  text-justify: inter-word;       /* hint to browsers that support it */
  text-align-last: start;         /* last line aligns to the start (right in RTL) */
  line-height: 1.9;               /* comfortable reading */
  font-size: 1.05rem;             /* optional */
}

/* Keep link chunks intact so they don’t break awkwardly */
.intro-text a {
  white-space: nowrap;
  text-decoration: underline;
}


/* ===== Mobile: real 100vh & no rubber-band overscroll ===== */
:root{ --vh: 1vh; }

/* Use real-vh everywhere we used 100vh */
.card-container{ height: calc(var(--vh) * 100) !important; }

html, body{
  overscroll-behavior-y: none;   /* stop iOS/Android bounce */
  background: #000;              /* keep your look stable on safe-area shifts */
}

/* Make the intro text and modal breathe on small phones but keep desktop feel */
@media (max-width: 768px){
  .intro-text{
    width: min(92vw, 720px);
    left: 4vw;
    font-size: clamp(15px, 2.1vw, 18px);
  }
  #modalContent{
    width: 98vw;
    height: 76vh;
  }
}


/* === TRUE MOBILE FIX: only phones/tablets === */
@media (max-width: 768px){
  body, html {
    perspective: 5200px !important;  /* pull camera back */
  }
  .card-container{
    transform:
      translate3d(0, 0, 0)
      rotateX(-35deg)
      rotateY(-15deg)
      scale(0.75) !important;  /* same visual distance as laptop */
    transform-origin: center center;
  }
}

/* === MOBILE OVERRIDES === */
@media (max-width: 768px) {
  .card {
    width: 90vw;
    height: 55vh;
  }
  .intro-text {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 92vw;
    font-size: 14px;
    padding: 15px;
    line-height: 1.6;
  }
  #modalContent {
    width: 95vw !important;
    height: 70vh !important;
    max-width: none;
    max-height: none;
  }
}
@media (max-width: 768px){
  .card-container{
    transform:
      translate3d(0, 0, 0)
      rotateX(-35deg)
      rotateY(-15deg); /* no scale here */
  }
}

/* Prevent horizontal scroll on all devices */
html, body {
  overflow-x: hidden;
}

/* Clamp intro-text inside viewport on mobile */
@media (max-width: 768px) {
  .intro-text {
    max-width: 100vw;       /* never wider than viewport */
    box-sizing: border-box; /* padding included in width */
    left: 50%;
    transform: translateX(-50%); /* keep centered */
  }
}
/* Once dismissed, keep intro hidden no matter what */
.intro-dismissed .intro-text {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}












/* ========== Intro-as-first-card ========== */
.card.intro-card {
  width: min(92vw, 720px);
  height: auto;
  min-height: 360px;             /* enough to feel like a card */
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: transparent;       /* we draw panel inside */
  border-radius: 14px;
  overflow: hidden;
}

/* remove the glossy overlay that image-cards use */
.card.intro-card::after { display: none; }

.intro-panel {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 18px 20px;
  border-radius: 14px;
  direction: rtl;
  text-align: right;
  box-shadow: 0 8px 25px rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
}

/* keep your existing modal + mobile rules as-is */
.intro-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  width: min(92vw, 720px);
  height: auto;
  min-height: 360px;
  border-radius: 14px;
  padding: 18px;
  color: #fff;
  font-family: 'Vazirmatn', Arial, sans-serif;
  direction: rtl;
  text-align: right;
  box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}
.intro-card p { font-size: 1rem; line-height: 1.8; }


/* Special styles for the first (intro) card */
.intro-card .intro-panel {
  font-size: 1.4rem;   /* bigger base font */
  line-height: 2;      /* more breathing room */
  font-weight: 600;    /* slightly bolder */
}

.intro-card .intro-panel p {
  font-size: inherit;  /* inherit the larger size */
  line-height: inherit;
}
.intro-card .intro-panel a {
  font-size: 1.2em;
}
@media (max-width: 768px) {
  .intro-card .intro-panel {
    font-size: 1.1rem;
    line-height: 1.8;
  }
}
/* Put at the end of style.css */
.intro-card,
.intro-card * {
  color: #fff !important;
  -webkit-text-fill-color: #fff; /* fixes Safari/iOS dark mode overrides */
}
.intro-card,
.intro-card p,
.intro-card span {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
.intro-card a {
  color: #00e6ff !important;
}
/* === Force intro card text colors on all devices === */
.intro-card,
.intro-card p,
.intro-card span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff; /* fixes iOS Safari dark-mode inversion */
}

.intro-card a {
  color: #007bff !important;       /* classic blue link */
  text-decoration: underline;
}
/* === Force intro card text/link colors on all devices === */
.intro-card,
.intro-card p,
.intro-card span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff; /* iOS Safari dark mode */
}

.intro-card a {
  color: #0000ff !important;          /* force pure blue */
  -webkit-text-fill-color: #0000ff !important; /* ensure iOS obeys */
  text-decoration: underline !important;
}
/* === Force intro-card colors on all devices (iOS/Android/desktop) === */
.intro-card,
.intro-card .intro-panel,
.intro-card .intro-panel * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important; /* iOS Safari dark-mode override */
  mix-blend-mode: normal !important;
}

/* Links specifically blue inside intro card */
.intro-card .intro-panel a {
  color: #0000ff !important;
  -webkit-text-fill-color: #0000ff !important;
  text-decoration: underline !important;
}


html { color-scheme: light; }
.intro-text, .intro-text * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.intro-text a {
  color: #0000ff !important;
  -webkit-text-fill-color: #0000ff !important;
}
/* Intro card mobile adjustments */
@media (max-width: 768px) {
  .intro-card .intro-panel {
    font-size: 1.4rem !important;   /* bigger text on phones */
    line-height: 2 !important;
  }

  .intro-card .intro-panel a {
    color: #0000ff !important;      /* strong blue */
    -webkit-text-fill-color: #0000ff !important; /* iOS Safari override */
    font-size: 1.3rem !important;   /* make links bigger too */
    text-decoration: underline !important;
  }
}
/* ===== Make intro card taller on mobile so full text is visible ===== */
@media (max-width: 768px) {
  .card.intro-card {
    height: auto !important;       /* allow it to expand with content */
    min-height: 100vh;              /* still at least 70% of screen */
    width: 92vw;                   /* keep near full width */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;                 /* breathing room around text */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .intro-card .intro-panel {
    font-size: 1.3rem;
    line-height: 1.9;
  }
}
/* === iOS fix: show the entire intro text inside a scrollable panel === */
@media (max-width: 768px) {
  /* Let the intro card breathe and DO NOT clip its contents */
  .card.intro-card {
    width: 92vw;
    height: auto !important;
    max-height: calc(var(--vh) * 0.86);   /* ~86% of real viewport height */
    overflow: visible !important;         /* override .card { overflow:hidden } */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;                           /* panel handles its own padding */
  }

  /* Make the inner panel scrollable within the card height */
  .intro-card .intro-panel {
    max-height: calc(var(--vh) * 0.86 - 24px); /* account for panel padding */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;    /* smooth iOS scrolling */
    padding: 12px;                        /* comfortable interior padding */
    background: rgba(0,0,0,0.88);         /* solid bg avoids WebKit tinting */
    border-radius: 14px;
    transform: translateZ(0);             /* promote a separate compositing layer */
  }

  /* Optional: slim scrollbar for iOS/Chrome mobile */
  .intro-card .intro-panel::-webkit-scrollbar { width: 6px; }
  .intro-card .intro-panel::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
    border-radius: 6px;
  }
}