/*******************************
 *    HIDE DEFAULT CURSOR ON BODY
 *******************************/
.hide-cursor {
  /* Use same crayon-optimized.png for cursor to maintain visual consistency */
  cursor: url('assets/crayon-optimized.png') 32 90, auto !important;
  /* Ensure cursor properties apply to all elements */
  * {
    cursor: inherit !important;
  }
}

/************************************
 *    BASIC PAGE & CONTAINER STYLE
 ************************************/
:root {
  --icon-brightness: 0.96;
  --shadow-opacity-base: 0.08;
  --portal-shadow-opacity: 0.16;
  --text-color: #666;
  /* Add more variables as needed for time-based shifts */
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* Prevent scrolling */
  background-color: #f8f6f1; /* Soft warm ivory */
  font-family: 'Amatic SC', sans-serif;
  /* Subtle paper grain texture overlay - now animated */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><filter id="n" x="0" y="0"><feTurbulence type="fractalNoise" baseFrequency="0.95" numOctaves="1" seed="42" result="f"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0" result="m"/><feComposite operator="in" in="SourceGraphic" in2="m"/></filter><rect width="400" height="400" fill="%23f8f6f1"/><rect width="400" height="400" filter="url(%23n)"/></svg>');
  background-size: 450px 450px; /* Slightly larger pattern */
  animation: subtleBackgroundShift 180s linear infinite alternate; /* Very slow shift */
}

@keyframes subtleBackgroundShift {
  from { background-position: 0 0; }
  to { background-position: 50px 25px; }
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/************************************
 *    CANVAS
 ************************************/
#canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* Canvas behind other elements */
  will-change: contents; /* GPU acceleration for drawing */
  transform: translateZ(0); /* Force GPU layer */
}

/************************************
 *    CRAYON - Creative Tool / Portal Opener
 ************************************/
#crayon {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  max-width: 120px;
  max-height: 120px;
  width: auto;
  height: auto;
  cursor: pointer;
  z-index: 4; /* Below portal/icons, above canvas */
  transform-origin: 50% 90%;
  transition: transform 0.27s cubic-bezier(.3,0,.2,1);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.10));
  will-change: transform; /* GPU acceleration for movement */
  backface-visibility: hidden; /* Prevent flickering */
}

@media (max-width: 600px) {
  #crayon {
    max-width: 90px;  /* Reduce crayon size on mobile */
    max-height: 90px; /* Reduce crayon size on mobile */
  }
}

/************************************
 *    MIRROR LINK (PORTAL) - Gateway / Reflection
 ************************************/
#mirror-link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 320px;
  height: 320px;
  max-width: 90vw;
  max-height: 90vw;
  min-width: 120px;
  min-height: 120px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  background: transparent;
}

@media (max-width: 600px) {
  #mirror-link { /* Mobile size */
    width: min(50vw, 50vh);
    height: min(50vw, 50vh);
    min-width: 60px;
    min-height: 60px;
    max-width: 60vw;
    max-height: 60vw;
  }

  /* Mobile container adjustments removed - now handled by standard flexbox */

  /* Combined icon styles for mobile */
  #ig-icon, #mail-icon {
    position: fixed;
    /* Common bottom position using safe area */
    bottom: calc(20px + env(safe-area-inset-bottom)); 
    /* Remove horizontal centering */
    /* left: 50%; */
    /* transform: translateX(-50%); */ 
  }
  #ig-icon {
    /* Position near left edge, accounting for safe area */
    left: calc(20px + env(safe-area-inset-left)); 
    /* Remove explicit bottom */
    /* bottom: calc(20px + env(safe-area-inset-bottom)); */
  }
  #mail-icon {
    /* Position near right edge, accounting for safe area */
    right: calc(20px + env(safe-area-inset-right)); 
    left: auto; /* Ensure right positioning takes precedence */
    /* Remove explicit bottom */
    /* bottom: calc(60px + env(safe-area-inset-bottom)); */
  }
  /* Mobile overrides for portal preview */
  #mirror-iframe {
    position: absolute; /* Position relative to parent container */
    filter: grayscale(1) blur(6px) brightness(0.94) contrast(0.92); /* Slightly less blur */
    border-width: 1.5vw; /* Slightly thinner border */
    /* Note: vw sizing for width/height might be sufficient, adjust if needed */
  }
}

/************************************
 *    PORTAL
 ************************************/
#mirror {
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: none;
  position: relative;
  /* JS now controls scale, opacity, blur */
  -webkit-mask-image: var(--portal-mask-url, url('assets/portal-mask.svg'));
  mask-image: var(--portal-mask-url, url('assets/portal-mask.svg'));
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Initial state - JS will override */
  transform: scale(0.13);
  opacity: 0.10;
  filter: blur(8px);
  will-change: transform, opacity, filter; /* GPU acceleration for portal animations */
  transform-style: preserve-3d; /* Enable 3D transforms */
}

#mirror-link.active #mirror {
  /* Restore base visibility for the active portal container */
  opacity: 1;
  background-color: rgba(30, 30, 30, 0.5); /* Subtle dark presence */
  /* Ensure mask is applied if needed for shape */
  -webkit-mask-image: inherit;
  mask-image: inherit;
  /* Ensure transition applies if needed */
  transition: opacity 1.1s cubic-bezier(.2,.8,.2,1), background-color 1.1s cubic-bezier(.2,.8,.2,1), filter 1.1s cubic-bezier(.2,.8,.2,1);
  transform: scale(1);
  filter: blur(2.5px);
}

#mirror-link.active {
  opacity: 1; /* Make link container receptive */
  pointer-events: auto; /* Allow hover/focus */
}

/************************************
 *    PORTAL PREVIEW
 ************************************/
#portal-preview-container {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Remove overflow:hidden to allow billboard to extend outside */
  overflow: visible;
  position: relative;
}

#mirror-iframe {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 25vw; /* Portrait width */
  height: 37.5vw; /* Portrait height - 3:2 aspect ratio */
  object-fit: cover; /* Prevent stretching, maintain aspect ratio */
  max-width: 35vw; /* Portrait max width */
  max-height: 52.5vw; /* Portrait max height */
  min-width: 140px; /* Portrait min width */
  min-height: 210px; /* Portrait min height */
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  background: #181818;
  border: 1.75vw solid #111; /* Frame border */
  box-sizing: border-box;
  box-shadow: 0 0 32px 6px rgba(80,80,80, var(--portal-shadow-opacity, 0.16)), 0 0 0 1px rgba(160,160,160,0.13);
  border-radius: 12px;
  filter: grayscale(1) blur(8px) brightness(0.94) contrast(0.92);
  pointer-events: none;
  z-index: 100;
  transition: opacity 1.15s cubic-bezier(.2,.8,.2,1),
              transform 1.15s cubic-bezier(.2,.8,.2,1),
              filter 1.15s cubic-bezier(.2,.8,.2,1);
}

/************************************
 *    PORTAL HOVER
 ************************************/
/* Subtle brightening effect on the preview when hovering the active portal */
#mirror-link.active:hover #mirror-iframe,
#mirror-link.active:focus #mirror-iframe /* Add focus for accessibility */ {
  filter: grayscale(1) blur(6px) brightness(1.05) contrast(0.95); /* Slightly less blur, brighter */
  /* Maintain other filter properties, adjust brightness/blur */
}

/************************************
 *    PORTAL FOCUS
 ************************************/
#mirror-link.active:focus #mirror-iframe,
#mirror-link.active:hover #mirror-iframe {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.04);
  filter: grayscale(1) blur(2.5px) brightness(0.97) contrast(0.95);
  border: 1px solid rgba(160,160,160,0.25);
}

/************************************
 *    ICONS
 ************************************/
/* Shared wrapper setup */
.email-icon-wrapper, .ig-icon-wrapper, .photo-icon-wrapper {
  position: fixed;
  bottom: 28px;
  display: inline-block;
  text-decoration: none;
  z-index: 4;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(15px); /* Start slightly below final position */
  transition: opacity 1.6s cubic-bezier(0.19, 1, 0.22, 1),
              transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.ig-icon-wrapper {
  left: calc(50% - 200px);
  transform: translateX(-50%) translateY(15px); /* Center the icon itself */
  transition-delay: 0.75s; /* Appear after portal */
}

.photo-icon-wrapper {
  left: 50%;
  transform: translateX(-50%) translateY(15px); /* Center positioning */
  transition-delay: 1.125s; /* Appear between Instagram and Email */
}

.email-icon-wrapper {
  left: calc(50% + 200px);
  transform: translateX(-50%) translateY(15px); /* Center the icon itself */
  transition-delay: 1.5s; /* Appear after photo icon */
}

/* Mobile responsive styles - portrait orientation */
@media (max-width: 767px) {
  .email-icon-wrapper, .ig-icon-wrapper, .photo-icon-wrapper {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateY(10px); /* Slightly smaller initial position adjustment */
    transition: opacity 1.6s cubic-bezier(0.19, 1, 0.22, 1),
                transform 1.4s cubic-bezier(0.19, 1, 0.22, 1),
                left 0.5s ease, bottom 0.5s ease; /* Smooth orientation changes */
    padding: 12px; /* Create larger touch target */
    margin: -12px; /* Offset padding to maintain visual position */
  }

  .ig-icon-wrapper {
    left: 15% !important; /* Force left position */
    right: auto !important;
    transform: translateY(10px) !important; /* No X translation needed */
  }

  .photo-icon-wrapper {
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important; /* Center positioning */
  }

  .email-icon-wrapper {
    left: auto !important;
    right: 15% !important; /* Force right position */
    transform: translateY(10px) !important; /* No X translation needed */
  }

  .email-icon, .ig-icon {
    width: 55px !important;
    height: 55px !important;
    transition: width 0.5s ease, height 0.5s ease, transform 0.5s cubic-bezier(0.17, 0.67, 0.35, 0.97),
                filter 0.8s cubic-bezier(0.17, 0.67, 0.35, 0.97); /* Smooth size changes */
  }

  .photo-icon {
    width: 65px !important; /* Slightly larger for Berlin icon */
    height: 65px !important;
    transition: width 0.5s ease, height 0.5s ease, transform 0.5s cubic-bezier(0.17, 0.67, 0.35, 0.97),
                filter 0.8s cubic-bezier(0.17, 0.67, 0.35, 0.97); /* Smooth size changes */
  }

  /* Ensure spacing is adequate between icons */
  body:has(#mirror-link.active) .ig-icon-wrapper {
    transform: translateY(0) !important;
  }

  body:has(#mirror-link.active) .photo-icon-wrapper {
    transform: translateX(-50%) translateY(0) !important;
  }

  body:has(#mirror-link.active) .email-icon-wrapper {
    transform: translateY(0) !important;
  }
}

/* Mobile responsive styles - landscape orientation */
@media (max-height: 500px) and (orientation: landscape) {
  .email-icon-wrapper, .ig-icon-wrapper, .photo-icon-wrapper {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .ig-icon-wrapper {
    left: 25%;
    transform: translateX(-50%); /* Center the icon at 25% */
  }

  .photo-icon-wrapper {
    left: 50%;
    transform: translateX(-50%);
  }

  .email-icon-wrapper {
    left: 75%;
    transform: translateX(-50%); /* Center the icon at 75% */
    right: auto;
  }

  .email-icon, .ig-icon, .photo-icon {
    width: 60px; /* Smaller in landscape to prevent overlap */
    height: 60px;
  }
}

/* Base icons */
.email-icon, .ig-icon, .photo-icon {
  display: block;
  width: 160px; /* 4x size */
  height: 160px; /* 4x size */
  object-fit: contain; /* Prevent distortion */
  filter: grayscale(1) brightness(var(--icon-brightness)) drop-shadow(0 2px 6px rgba(90,90,90, var(--shadow-opacity-base)));
  transform-origin: center center; /* Ensure rotations appear natural */
  transition: transform 0.5s cubic-bezier(0.17, 0.67, 0.35, 0.97),
              filter 0.8s cubic-bezier(0.17, 0.67, 0.35, 0.97);
}


/* Icon animation states */
.email-icon-wrapper.active .email-icon {
  animation: mailboxShudder 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

.ig-icon-wrapper.active .ig-icon {
  animation: spiralUnwind 2.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* Pre-animation pause and analog hesitation for icons */
.email-icon-wrapper:hover .email-icon {
  animation: trembleFlag 1.5s cubic-bezier(0.42, 0, 0.58, 1) 0.08s forwards; /* Tiny natural pause */
  transform: translateY(2px); /* Note shifts slightly inward */
}

.ig-icon-wrapper:hover .ig-icon {
  animation: spiralFlicker 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.08s forwards; /* Tiny natural pause */
}

/* Graphite dust aura effect - enhanced texture */
.email-icon-wrapper::after {
  content: "";
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  background: 
    radial-gradient(circle at 30% 40%, rgba(100,100,100,0.06) 0%, rgba(120,120,120,0.03) 30%, transparent 70%),
    radial-gradient(circle at 70% 60%, rgba(100,100,100,0.04) 0%, rgba(120,120,120,0.02) 40%, transparent 70%);
  background-size: 100% 100%, 80% 80%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.17, 0.67, 0.35, 0.97);
}

/* Enhanced texture for high-density displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .email-icon-wrapper::after {
    background: 
      radial-gradient(circle at 30% 40%, rgba(100,100,100,0.08) 0%, rgba(120,120,120,0.04) 30%, transparent 70%),
      radial-gradient(circle at 70% 60%, rgba(100,100,100,0.06) 0%, rgba(120,120,120,0.03) 40%, transparent 70%);
  }
}

.email-icon-wrapper:hover::after {
  opacity: 1;
}

/* Show icons when portal is active */
body:has(#mirror-link.active) .email-icon-wrapper,
body:has(#mirror-link.active) .ig-icon-wrapper {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

body:has(#mirror-link.active) .photo-icon-wrapper {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/************************************
 *    ICON HOVER
 ************************************/
/* When icons have .visible class (added via JS) */
#ig-icon.visible,
#mail-icon.visible,
#ig-link.visible,
#mail-link.visible {
  opacity: 1;
  transform: translateY(0); /* Settle into final position */
  pointer-events: auto;
}

/* Fallback for direct children (most robust) */
#mirror-link.active ~ a > img {
  opacity: 1;
  pointer-events: auto;
}
#mirror-link.active ~ a {
  pointer-events: auto;
}

/************************************
 *    ICON HOVER EFFECTS
 ************************************/
#ig-icon:hover, #ig-icon:focus,
#mail-icon:hover, #mail-icon:focus {
  filter: grayscale(1) brightness(1.13) drop-shadow(0 4px 12px rgba(90,90,90, var(--shadow-opacity-base)));
  outline: none;
}

/************************************
 *    HOVER TEXT
 ************************************/
/* Hover text styling */
.ig-hover-text, .email-hover-text {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  text-align: center;
  
  /* Text styling */
  font-family: 'lvvvdy', cursive, sans-serif;
  font-size: 18px; /* Subtle, intimate font size */
  line-height: 1.25;
  color: var(--text-color, #555);
  letter-spacing: 0.02em;
  font-weight: 400;
  
  /* Visibility */
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  white-space: normal;
  padding-top: 8px;
  
  /* Typewriter effect setup */
  clip-path: inset(0 100% 0 0); /* Initially hidden */
  transition: clip-path 0s;
}

/* Mobile responsive text styles */
@media (max-width: 767px) {
  .ig-hover-text, .email-hover-text {
    width: 120px;
    font-size: 16px;
    bottom: -14px;
  }
  
  .emotional-text {
    font-size: 14px;
  }
}

/* Extra small screen text legibility */
@media (max-width: 350px) {
  .ig-hover-text, .email-hover-text {
    width: 100px;
    font-size: 14px;
    line-height: 1.2;
  }
  
  .emotional-text {
    font-size: 12px;
  }
}

/* Landscape orientation text adjustments */
@media (max-height: 500px) and (orientation: landscape) {
  .ig-hover-text, .email-hover-text {
    width: 100px;
    font-size: 14px;
    bottom: -12px;
  }
  
  /* Alternative placement for emotional text in landscape mode */
  #mail-gone-text {
    right: -10px;
  }

  #ig-gone-text {
    bottom: -6px;
  }
}

/* Typewriter animation applied by hover */
.ig-icon-wrapper:hover .ig-hover-text,
.email-icon-wrapper:hover .email-hover-text {
  animation: textTypewriter 3.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-delay: 0.85s; /* Delayed appearance */
}

/* Emotional text that appears after click */
.emotional-text {
  position: absolute;
  font-family: 'lvvvdy', cursive, sans-serif;
  font-size: 16px;
  color: var(--text-color, #666);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  transition: opacity 0.3s;
}

/* Positioning emotional text */
#ig-gone-text {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  opacity: 0;
}

#mail-gone-text {
  right: -15px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  opacity: 0;
}

/* Emotional text animations */
.ig-icon-wrapper.active #ig-gone-text {
  animation: invertedTextFlash 2.2s cubic-bezier(0.17, 0.67, 0.35, 0.97) forwards;
}

.email-icon-wrapper.active #mail-gone-text {
  animation: textTypewriter 2s cubic-bezier(0.17, 0.67, 0.35, 0.97) forwards;
}

/* Text residue - subtle darkening that lingers after text fades */
.ig-icon-wrapper::before,
.email-icon-wrapper::before,
.photo-icon-wrapper::before {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 15px;
  background: rgba(100,100,100,0.03);
  opacity: 0;
  transition: opacity 1.5s ease;
}

.ig-icon-wrapper.text-residue::before,
.email-icon-wrapper.text-residue::before,
.photo-icon-wrapper.text-residue::before {
  opacity: 0.15; /* Slightly stronger for better visibility */
  transition: opacity 0.2s ease;
}

/* Adjust text residue size on small screens */
@media (max-width: 350px) {
  .ig-icon-wrapper::before,
  .email-icon-wrapper::before,
  .photo-icon-wrapper::before {
    width: 80px;
    height: 12px;
    bottom: -12px;
  }
}

#ig-hover-text {
  /* left: 28px; */ /* Incorrect - this put it at screen edge */
  left: calc(50% - 170px); /* Match ig-icon centered positioning */
}

#mail-hover-text {
  /* right: 28px; */ /* Incorrect - this put it at screen edge */
  left: calc(50% + 170px); /* Match mail-icon centered positioning */
}

/* Word-by-word sequential reveal styling */
.hover-word {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s ease, transform 0.6s ease;
  display: inline-block;
}

.hover-text.visible .hover-word {
  opacity: 1;
  transform: translateY(0);
}

/************************************
 *    ICON LINKS (GENERAL STYLING)
 ************************************/
/* No special styles needed for links - positioning handled by hover-text */

/************************************
 *    FONT FACE
 ************************************/
@font-face {
  font-family: 'lvvvdy';
  src: url('assets/Lvvvdy.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/************************************
 *    ANIMATIONS
 ************************************/
/* Memory-based icon animations */
@keyframes fadeInSlow {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Mail icon animations - refined for analog memory feeling */
@keyframes trembleFlag {
  0% { transform: rotate(0deg) translateY(0); }
  10% { transform: rotate(0deg) translateY(0); } /* Initial hesitation */
  13% { transform: rotate(0.2deg) translateY(0.5px); } /* Initial subtle movement */
  25% { transform: rotate(1deg) translateY(1px); } /* Note shifts slightly */
  38% { transform: rotate(-1.2deg) translateY(1.8px); } /* Deepening movement */
  40% { transform: rotate(-1.5deg) translateY(2px); } /* Peak trembling */
  60% { transform: rotate(0.8deg) translateY(2.5px); } /* Flag trembles, note shifts */
  75% { transform: rotate(-0.3deg) translateY(2.2px); } /* Settling phase begins */
  90% { transform: rotate(0.1deg) translateY(2px); } /* Almost settled */
  100% { transform: rotate(0deg) translateY(2px); } /* Gentle resting position */
}

@keyframes mailboxShudder {
  0% { transform: rotate(0deg) translateY(2px); }
  20% { transform: rotate(-1deg) translateY(3px); } /* Mail slides further in */
  40% { transform: rotate(1.5deg) translateY(3px); }
  60% { transform: rotate(-1deg) translateY(2.5px); }
  80% { transform: rotate(0.5deg) translateY(2px); }
  100% { transform: rotate(0deg) translateY(2px); }
}

/* Instagram icon animations - refined for memory surface/vanish */
@keyframes spiralFlicker {
  0% { transform: scale(1) rotate(0deg); filter: grayscale(1) brightness(var(--icon-brightness)); }
  5% { transform: scale(1) rotate(0deg); } /* Initial hesitation pause */
  15% { transform: scale(0.995) rotate(-0.5deg); } /* Subtle rotation */
  40% { transform: scale(0.98) rotate(-0.8deg); filter: grayscale(1) brightness(calc(var(--icon-brightness) + 0.05)); }
  65% { transform: scale(0.988) rotate(-0.3deg); filter: grayscale(1) brightness(calc(var(--icon-brightness) + 0.02)); }
  85% { transform: scale(0.995) rotate(0deg); filter: grayscale(1) brightness(var(--icon-brightness)); }
  100% { transform: scale(1) rotate(0deg); filter: grayscale(1) brightness(var(--icon-brightness)); }
}

@keyframes spiralUnwind {
  0% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-30deg) scale(0.98); } /* Initial unwinding */
  40% { transform: rotate(-120deg) scale(1.03); } /* Expanded state */
  75% { transform: rotate(-20deg) scale(0.98); } /* Rewinding */
  100% { transform: rotate(0deg) scale(1); } /* Return to original state */
}

/* Shared text animations - with micro-pauses */
@keyframes textTypewriter {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  10% { opacity: 0; clip-path: inset(0 100% 0 0); } /* Initial delay */
  12% { opacity: 0.05; clip-path: inset(0 95% 0 0); } /* First character hint */
  15% { opacity: 0.2; clip-path: inset(0 85% 0 0); } /* First few characters */
  18% { opacity: 0.3; clip-path: inset(0 80% 0 0); } /* Micro-pause in typing */
  30% { opacity: 0.85; clip-path: inset(0 30% 0 0); } /* Substantial reveal */
  32% { opacity: 0.85; clip-path: inset(0 30% 0 0); } /* Slight typing hesitation */
  40% { opacity: 0.85; clip-path: inset(0 0 0 0); } /* Fully revealed */
  70% { opacity: 0.85; clip-path: inset(0 0 0 0); } /* Hold visible */
  85% { opacity: 0.4; clip-path: inset(0 0 0 0); } /* Start fading */
  100% { opacity: 0; clip-path: inset(0 0 0 0); } /* Completely faded */
}

/* Accessibility - respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .email-icon, .ig-icon, .photo-icon,
  .email-hover-text, .ig-hover-text,
  .emotional-text {
    transition-duration: 0.1s !important;
    animation-duration: 0.1s !important;
  }
  
  @keyframes textTypewriter {
    0% { opacity: 0; }
    40% { opacity: 0.85; }
    70% { opacity: 0.85; }
    100% { opacity: 0; }
  }
  
  @keyframes trembleFlag {
    0% { transform: none; }
    100% { transform: none; }
  }
  
  @keyframes spiralFlicker {
    0% { transform: none; }
    100% { transform: none; }
  }
  
  @keyframes mailboxShudder {
    0% { transform: none; }
    100% { transform: none; }
  }
  
  @keyframes spiralUnwind {
    0% { transform: none; }
    100% { transform: none; }
  }
  
  @keyframes invertedTextFlash {
    0% { transform: none; }
    100% { transform: none; }
  }
}

@keyframes invertedTextFlash {
  0% { opacity: 0; transform: rotate(180deg) translateY(-5px); }
  10% { opacity: 0; transform: rotate(180deg) translateY(-5px); } /* Initial delay */
  30% { opacity: 0.65; transform: rotate(180deg) translateY(-8px); } /* Flash up */
  80% { opacity: 0; transform: rotate(180deg) translateY(-10px); } /* Extended fade */
  100% { opacity: 0; transform: rotate(180deg) translateY(-10px); }
}

/* Fingerprint ghost effect - extremely subtle */
@keyframes fingerprintFade {
  0% { opacity: 0; }
  50% { opacity: 0.15; } /* Peak at very low opacity */
  100% { opacity: 0; }
}

/************************************
 *    VIMEO MODAL (Fullscreen Overlay)
 ************************************/
#vimeo-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent background */
  display: flex; /* Changed from none by JS */
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Ensure it's on top */
  opacity: 0; /* Initially hidden, faded in by JS */
  pointer-events: none; /* Initially not interactive */
  transition: opacity 0.5s ease-in-out; /* Match JS timeout */
}

/* Style for when modal is visible (JS sets opacity to 1) */
#vimeo-modal[style*="opacity: 1"] {
  pointer-events: auto; /* Make it interactive when visible */
}

#vimeo-modal-iframe {
  display: block;
  /* Adjust size for cinematic view, maintaining aspect ratio */
  width: 90%; 
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: 90vw;
  max-height: 90vh; /* Prevent exceeding viewport */
  border: none; /* Remove default iframe border */
  background-color: #000; /* Black background while loading */
}

#modal-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 35px;
  font-weight: bold;
  color: #ccc; /* Light gray, less harsh than pure white */
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001; /* Above iframe */
  transition: color 0.3s ease;
}

#modal-close:hover {
  color: #fff; /* White on hover */
}

/************************************
 *    FOOTER
 ************************************/
footer {
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  pointer-events: none;
}

footer p {
  font-family: 'lvvvdy', cursive, sans-serif;
  font-size: 12px;
  color: #999;
  margin: 0;
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  footer {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }

  footer p {
    font-size: 10px;
    max-width: 80vw;
  }
}