/* Core fonts */
@font-face { font-family: 'RAMI'; src: url('../fonts/RAMI.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'GENSCO'; src: url('../fonts/GENSCO.woff2') format('woff2'); font-display: swap; }

html, body { min-height: 100%; }

body { margin:0; overflow:hidden; background:#f5f1e8 url('../images/background.png') center / cover no-repeat fixed; font-family:'RAMI'; color:#fff; }
body.cursor-hidden { cursor:auto; }
/* Model loading indicator */
#model-loading-indicator { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'RAMI',serif; font-size:48px; letter-spacing:6px; color:#32ff6a; text-shadow:0 0 8px rgba(50,255,106,0.75),0 0 18px rgba(50,255,106,0.4); z-index:1200; pointer-events:none; opacity:0; mix-blend-mode:screen; transition:opacity .45s ease; }
#model-loading-indicator.active { opacity:1; }
/* Background slideshow */
#background-slideshow{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#background-slideshow .bg-frame{ position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:cover; opacity:0; transition: opacity 8s ease; }
#background-slideshow .bg-frame.active{ opacity:1; }

/* Prevent iOS double-tap to zoom and odd gesture magnification on controls */
html, body { touch-action: manipulation; }
button, a, input, textarea, select { touch-action: manipulation; }
/* Ensure form controls are large enough so iOS doesn’t auto-zoom them */
#contact-form-popover input,
#contact-form-popover textarea,
#open-contact-form { font-size: 16px; }

 

/* Mobile background behavior for smoother scrolling */
@media (max-width:768px){
  body{ background-attachment: scroll; background-position: center top; background-size: cover; background-repeat: no-repeat; }
  /* Keep slideshow visible; remove body pseudo-element duplication */
}

/* Animated custom cursor (8 frames 64x64) */
#custom-cursor { position:fixed; left:0; top:0; width:64px; height:64px; pointer-events:none; z-index:10000; display:none; /* hidden until JS activates */
  background:url('../cursors/cursor1.png') center/contain no-repeat; image-rendering:crisp-edges; mix-blend-mode:normal; transition:opacity .2s; }
#custom-cursor.animating { display:block; }
@media (prefers-reduced-motion: reduce){ #custom-cursor { animation:none; } }

/* Cursor-follow overlay for artwork title/meta (desktop only) */
#cursor-overlay{ position:fixed; left:0; top:0; transform:translate3d(-9999px,-9999px,0); z-index:10002; 
  pointer-events:none; font-family:'RAMI',serif; font-size:14px; line-height:1.15; letter-spacing:1px; color:#fff;
  /* Discreet readable background */
  background:rgba(0,0,0,0.45); border:none; border-radius:8px; padding:6px 8px; box-shadow:0 2px 10px rgba(0,0,0,0.25); max-width:min(48vw, 380px); transition: opacity .2s ease; }
#cursor-overlay .title{ display:block; font-size:19.2px; letter-spacing:2px; margin-bottom:4px; animation: title-spectrum 6s linear infinite; will-change: color, text-shadow; }
#cursor-overlay .meta{ display:block; font-family:'GENSCO',sans-serif; font-size:12.24px; opacity:0.95; animation: title-spectrum 6s linear infinite; will-change: color, text-shadow; }
/* Overlay can also be shown on touch via tap; don't force-hide it */

/* Removed custom image cursor */

#unity-container { position:absolute; inset:0; width:100vw; height:100vh; display:flex; justify-content:center; align-items:center; background:#000; z-index:100; }
#unity-canvas { width:100vw; height:100vh; display:block; background:#000; touch-action:none; }
#unity-loading { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-size:4em; z-index:200; text-align:center; }

#fade-overlay { position:fixed; inset:0; background:transparent; z-index:1000; opacity:1; transition:opacity 2s ease-in-out; display:flex; justify-content:center; align-items:center; color:transparent; pointer-events:none; }

#portfolio-content { display:none; position:absolute; inset:0; width:100vw; height:100vh; z-index:10; background:transparent; background-size:cover; }
#artwork-display { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; z-index:20; }
#artwork-media { max-width:60vw; max-height:70vh; object-fit:contain; transition:opacity .3s ease; will-change:opacity,transform; }

/* Model-viewer should occupy the same box as images/videos */
model-viewer#artwork-media { width:60vw; height:70vh; max-width:60vw; max-height:70vh; display:block; }
/* Reposition model-viewer progress bar: centered below model */
/* Minimal tweak: just move default model-viewer progress bar below model */
@media (max-width:768px){ }

/* Model navigation buttons */
#prev-artwork,#next-artwork{ position:fixed; bottom:18px; z-index:10002; background:rgba(0,0,0,0.55); color:#fff; border:1px solid #fff; border-radius:10px; padding:10px 16px; font-family:'RAMI',serif; font-size:15px; letter-spacing:2px; }
#prev-artwork{ left:18px; }
#next-artwork{ right:18px; }
#prev-artwork:hover,#next-artwork:hover{ background:rgba(255,255,255,0.15); }
/* Icon variant overrides */
#prev-artwork.nav-icon-btn,#next-artwork.nav-icon-btn{ width:108px; height:108px; padding:0; background:transparent; border:none; border-radius:0; }
.nav-icon-btn img{ width:100%; height:100%; display:block; object-fit:contain; pointer-events:none; }
.nav-icon-btn:hover img{ filter:drop-shadow(0 0 6px rgba(255,216,0,0.6)); }
#prev-artwork.nav-icon-btn:focus-visible,#next-artwork.nav-icon-btn:focus-visible{ outline:2px solid #ffd800; outline-offset:2px; }

/* Removed mosaic background layer */

/* Glitch vanish / spawn (performance-friendly: opacity + transform only) */
@keyframes glitch-out {
  0% { opacity:1; transform:translate3d(0,0,0) scale(1); filter:none; }
  15% { transform:translate3d(-4px,2px,0) scale(.98); }
  30% { transform:translate3d(6px,-3px,0) scale(1.02); opacity:.85; }
  45% { transform:translate3d(-3px,1px,0) scale(.97); opacity:.65; }
  60% { transform:translate3d(5px,-2px,0) scale(1.03); opacity:.4; }
  75% { transform:translate3d(-2px,2px,0) scale(.92); opacity:.2; }
  100% { opacity:0; transform:translate3d(0,0,0) scale(.9); }
}
@keyframes glitch-in {
  0% { opacity:0; transform:translate3d(0,0,0) scale(1.08); }
  10% { opacity:.25; transform:translate3d(3px,-2px,0) scale(1.02); }
  20% { opacity:.55; transform:translate3d(-5px,3px,0) scale(1.04); }
  35% { opacity:.7; transform:translate3d(4px,-3px,0) scale(.98); }
  50% { opacity:.85; transform:translate3d(-2px,2px,0) scale(1.01); }
  65% { opacity:.9; transform:translate3d(1px,-1px,0) scale(.99); }
  80% { opacity:.97; transform:translate3d(-1px,1px,0) scale(1.005); }
  100% { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
#artwork-media.wavy-out { animation:glitch-out .5s linear forwards; }
#artwork-media.wavy-in { animation:glitch-in .5s linear forwards; }

#portfolio-loading { position:fixed; inset:0; width:100vw; height:100vh; background:#000; z-index:1500; display:none; justify-content:center; align-items:center; opacity:1; transition:opacity 1s ease-out; }
#portfolio-loading.fade-out { opacity:0; }
#portfolio-loading-video { width:100vw; height:100vh; object-fit:cover; }

#artwork-title { position:fixed; bottom:62px; left:50%; transform:translateX(-50%); pointer-events:none; z-index:9999; font-size:33px; white-space:nowrap; opacity:1; color:#000000; font-family:'RAMI'; letter-spacing:12px; animation:title-breathe 6s ease-in-out infinite, title-spectrum 24s linear infinite; will-change:transform,color; text-shadow:0 0 6px rgba(255,0,0,0.25); }

/* Secondary meta (technique / dimensions) */
#artwork-meta { position:fixed; bottom:42px; left:50%; transform:translateX(-50%); pointer-events:none; z-index:9998; font-family:'GENSCO',sans-serif; font-size:15px; line-height:1.15; color:#fff7d5; opacity: 0.8; letter-spacing:0; white-space:nowrap; transition:opacity .25s ease; animation:meta-breathe 4s ease-in-out infinite; }
#artwork-meta.hidden { opacity:0; }

@keyframes meta-breathe {
  0%,100% { transform:translateX(-50%) scale(1); letter-spacing:0; }
  /* Subtle: less than title (title scale +0.019); here +0.009 and tiny spacing */
  50% { transform:translateX(-50%) scale(1.009); letter-spacing:0.3px; }
}
/* (moved hidden rule above with meta styles) */

@keyframes title-breathe {
  0%,100% { transform:translateX(-50%) scale(1); letter-spacing:10px; }
  /* Halved amplitude from previous values: scale 1.037 -> 1.019, letter-spacing 14px -> 6px */
  50% { transform:translateX(-50%) scale(1.019); letter-spacing:6px; }
}

@keyframes title-spectrum {
  /* Updated: include lime green and black; remove yellow; cooler cycle with lime, cyan, blue, violet */
  0%   { color:#981fa6; text-shadow:0 0 6px rgba(0,0,0,0.6); }
  20%  { color:#32ff4f; text-shadow:0 0 7px rgba(50,255,79,0.50); }   /* lime green */
  40%  { color:#4dd2ff; text-shadow:0 0 7px rgba(77,210,255,0.60); }   /* cyan */
  60%  { color:#475dcc; text-shadow:0 0 7px rgba(102,128,255,0.60); }  /* blue */
  80%  { color:#8c4ee8; text-shadow:0 0 7px rgba(140,102,255,0.60); }  /* violet */
  100% { color:#6732da; text-shadow:0 0 6px rgba(0,0,0,0.6); }
}

#bottom-right-text { position:fixed; bottom:20px; right:20px; font-family:'GENSCO' !important; font-size:14px; color:#fff; opacity:.7; pointer-events:none; z-index:9998; text-align:right; line-height:1.2; }
#contact-button{position:fixed;top:0;left:0;z-index:10001;background:transparent;border:none;padding:0;margin:0;cursor:pointer;will-change:transform;}
#contact-button img{width:104px;height:104px;display:block;}
#contact-button .rotwrap{display:inline-block;animation:spin-360 12s linear infinite;}
#contact-button .squashwrap{display:inline-block;}
#contact-button .squashwrap.squash{animation:squash 160ms ease-out;}
#contact-button, #contact-button * { cursor: auto !important; }
/* Credits button (mirrors contact but positioned left-center) */
#credits-button{position:fixed;left:50%;bottom:8px;transform:translateX(-50%);z-index:10001;background:transparent;border:none;padding:0;margin:0;cursor:pointer;will-change:transform;}
#credits-button img{width:96px;height:96px;display:block;}
#credits-button .rotwrap{display:inline-block;/* rotation removed */ animation:none;}
#credits-button .rotwrap.slow{animation-duration:20s;}
#credits-button .squashwrap{display:inline-block;}
#credits-button .squashwrap.squash{animation:squash 160ms ease-out;}
#credits-button, #credits-button * { cursor: auto !important; }
/* Icon labels removed */
/* Visual-only extra bouncer */
#fun-bouncer{position:fixed;top:0;left:0;z-index:10000;background:transparent;border:none;padding:0;margin:0;will-change:transform;}
#fun-bouncer img{width:54px;height:54px;display:block;opacity:0.9;}
#fun-bouncer .rotwrap{display:inline-block;animation:spin-360 10s linear infinite;}
#fun-bouncer .squashwrap{display:inline-block;}
#fun-bouncer .squashwrap.squash{animation:squash 160ms ease-out;}
#fun-bouncer, #fun-bouncer * { cursor: auto !important; }
@keyframes spin-360{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes squash{0%{transform:scale(1);}50%{transform:scaleX(0.9) scaleY(1.1);}100%{transform:scale(1);}}
@keyframes contact-slide{
  0%{ transform:translateX(calc(-50% - 45vw)); }
  100%{ transform:translateX(calc(-50% + 45vw)); }
}
#contact-popover{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:10001;max-width:min(90vw,420px);padding:10px 12px;border-radius:8px;background:#555;color:#fff;font-family:'GENSCO',sans-serif;font-size:13px;line-height:1.25;box-shadow:0 4px 18px rgba(0,0,0,0.25);backdrop-filter:saturate(1) blur(1px);display:none;overflow:hidden;}
#contact-popover,#contact-form-popover{font-family:'GENSCO',sans-serif;}
#open-contact-form{font-family:'RAMI',serif;font-size:17.5px;letter-spacing:1px;padding:7.5px 12.5px;border-radius:7.5px;border:1px solid #2a8800;background:transparent;color:#32ff4f;cursor:auto !important;transition:filter .15s ease, border-color .15s ease, box-shadow .15s ease; text-transform:uppercase;}
#open-contact-form:hover,#open-contact-form:focus{filter:brightness(1.12);border-color:#36a300;box-shadow:0 0 0 3px rgba(50,255,79,0.25);} 
#contact-form-popover{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:10001;width:min(90vw,294px);box-sizing:border-box;padding:14px 16px;border-radius:10px;background:#555;color:#32ff4f;font-size:14px;line-height:1.35;box-shadow:0 6px 22px rgba(0,0,0,0.28);backdrop-filter:saturate(1) blur(1px);display:none;overflow:hidden;}
#contact-form-popover form{display:flex;flex-direction:column;gap:10px;}
#contact-form-popover input,#contact-form-popover textarea{width:100%;max-width:100%;box-sizing:border-box;display:block;padding:8px 10px;border-radius:6px;border:1px solid rgba(50,255,79,0.35);background:rgba(50,255,79,0.06);color:#32ff4f;caret-color:#32ff4f;font-family:'GENSCO',sans-serif;transition:filter .15s ease, border-color .15s ease, box-shadow .15s ease, background-color .15s ease;}
#contact-form-popover input::placeholder,#contact-form-popover textarea::placeholder{color:rgba(50,255,79,0.7);} 
#contact-form-popover input:hover,#contact-form-popover input:focus,#contact-form-popover textarea:hover,#contact-form-popover textarea:focus{filter:brightness(1.08);border-color:#36a300;background:rgba(50,255,79,0.12);box-shadow:0 0 0 3px rgba(50,255,79,0.18);outline:none;}
#contact-form-popover .form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px;}
#contact-form-popover button{border:1px solid #2a8800;background:transparent;color:#32ff4f;padding:6px 10px;border-radius:6px;cursor:auto !important;font-family:'GENSCO',sans-serif;transition:filter .15s ease, border-color .15s ease, box-shadow .15s ease;}
#contact-form-popover button:hover,#contact-form-popover button:focus{filter:brightness(1.12);border-color:#36a300;box-shadow:0 0 0 3px rgba(50,255,79,0.25);outline:none;}
#contact-popover, #contact-popover * , #contact-form-popover, #contact-form-popover * { cursor: auto !important; }
#contact-form-status{min-height:18px;font-size:12px;opacity:.85;margin-top:4px;}

/* Third bouncing icon and watch popover */
#watch-button{position:fixed;top:0;left:0;z-index:10000;background:transparent;border:none;padding:0;margin:0;cursor:pointer;will-change:transform;}
#watch-button img{width:132px;height:132px;display:block;}
#watch-button .rotwrap{display:inline-block;animation:spin-360 11s linear infinite;}
#watch-button .squashwrap{display:inline-block;}
#watch-button .squashwrap.squash{animation:squash 160ms ease-out;}
#watch-button, #watch-button * { cursor: auto !important; }
#watch-popover{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:10001;max-width:min(90vw,420px);padding:10px 12px;border-radius:8px;background:#555;color:#fff;font-family:'GENSCO',sans-serif;font-size:13px;line-height:1.25;box-shadow:0 4px 18px rgba(0,0,0,0.25);backdrop-filter:saturate(1) blur(1px);display:none;overflow:hidden;}
#watch-video-button{font-family:'RAMI',serif;font-size:17.5px;letter-spacing:1px;padding:7.5px 12.5px;border-radius:7.5px;border:1px solid #8c9a00;background:transparent;color:#c3de16;cursor:auto !important;transition:filter .15s ease, border-color .15s ease, box-shadow .15s ease; text-transform:uppercase;}
#watch-video-button:hover,#watch-video-button:focus{filter:brightness(1.12);border-color:#a6b300;box-shadow:0 0 0 3px rgba(230,255,77,0.25);} 

/* Fourth and fifth bouncing icons */
#groovy-bouncer,#poppies-bouncer{position:fixed;z-index:10000;background:transparent;border:none;padding:0;margin:0;}
#groovy-bouncer{top:4px;right:4px;}
#poppies-bouncer{top:4px;right:4px;left:auto;transform:none;}
#groovy-bouncer img,#poppies-bouncer img{width:108px;height:108px;display:block;}
#groovy-bouncer .rotwrap,#poppies-bouncer .rotwrap{display:inline-block;animation:spin-360 12s linear infinite;}
#groovy-bouncer .squashwrap,#poppies-bouncer .squashwrap{display:inline-block;}
#groovy-bouncer .squashwrap.squash,#poppies-bouncer .squashwrap.squash{animation:squash 160ms ease-out;}
#groovy-bouncer, #groovy-bouncer *, #poppies-bouncer, #poppies-bouncer * { cursor: auto !important; }

/* Removed size reduction; static icons */

/* Pause only icon rotations when icons are toggled paused */
body.icons-paused #contact-button .rotwrap,
body.icons-paused #fun-bouncer .rotwrap,
body.icons-paused #watch-button .rotwrap,
body.icons-paused #groovy-bouncer .rotwrap,
body.icons-paused #poppies-bouncer .rotwrap { animation-play-state: paused !important; }
body.icons-paused #credits-button .rotwrap { animation-play-state: paused !important; }

/* Landscape lock overlay (touch devices: phones + tablets) */
#landscape-lock{ display:none; }
@media (orientation:landscape) and (hover: none) and (pointer: coarse){
  #landscape-lock{ position:fixed; inset:0; z-index:20000; display:flex; align-items:center; justify-content:center; background:#000; color:#fff; font-family:'RAMI', serif; }
  #landscape-lock .landscape-lock-inner{ font-size: clamp(16px, 5vw, 36px); letter-spacing: 3px; text-align:center; padding: 6vw; }
  /* Pause pointer interactions behind */
  #portfolio-content, #contact-button, #fun-bouncer, #watch-button { pointer-events:none !important; }
}

/* Pause animations when landscape lock is visible */
body.landscape-paused *,
body.landscape-paused #artwork-media,
body.landscape-paused #custom-cursor { animation-play-state: paused !important; }

/* Mobile-friendly sizing and anchoring */
@media (max-width:480px){
  #contact-button{top:0;left:0;transform:none;} 
  #contact-button img{width:120px;height:120px;}
  #contact-popover{top:52px;max-width:min(94vw,420px);font-size:12px;padding:8px 10px;}
  #open-contact-form{font-size:13px;padding:6px 9px;}
  #contact-form-popover{top:52px;width:min(94vw,460px);padding:12px 14px;font-size:13px;}
  #contact-form-popover input,#contact-form-popover textarea{font-size:13px;}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
#mobile-touch-area { position:fixed; inset:0; z-index:25; background:transparent; display:none; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
#portfolio-content.active #mobile-touch-area { display:block; }

/* Credits overlay */
#credits-overlay{ position:fixed; inset:0; z-index:16000; background:rgba(0,0,0,0.85); display:none; align-items:center; justify-content:center; padding:6vh 4vw; box-sizing:border-box; }
#credits-overlay .credits-inner{ position:relative; width:min(640px,90vw); max-height:80vh; background:rgba(20,20,20,0.6); border:1px solid rgba(50,255,79,0.35); border-radius:14px; padding:28px 34px 36px; box-shadow:0 8px 40px rgba(0,0,0,0.5); backdrop-filter:blur(6px) saturate(1.2); overflow:hidden; display:flex; flex-direction:column; }
#credits-overlay #close-credits{ position:absolute; top:6px; right:10px; background:transparent; border:none; color:#32ff4f; font-size:30px; line-height:1; cursor:auto !important; padding:4px 6px; }
#credits-overlay #close-credits:focus-visible{ outline:2px solid #32ff4f; border-radius:6px; }
#credits-overlay .credits-scroll{ position:relative; overflow:hidden; flex:1; }
#credits-overlay .credits-content{ font-family:'GENSCO',sans-serif; font-size:15px; line-height:1.35; color:#d4d4d4; display:flex; flex-direction:column; gap:14px; padding-right:4px; }
#credits-overlay .credits-content h2 {
  margin:0 0 6px;
  font-family:'RAMI',serif;
  letter-spacing:6px;
  font-size:30px;
  text-align:center;
  animation:title-spectrum 24s linear infinite;
  /* Remove breathing effect */
}
#credits-overlay .credits-content p:first-of-type { text-align:center; }
#credits-overlay .credits-content h2 + p {
  text-align:center;
  font-family:'RAMI',serif;
  letter-spacing:5px;
  font-size:22px;
  margin-top:-4px;
  margin-bottom:12px;
  animation:title-spectrum 24s linear infinite;
  text-transform:uppercase;
}
#credits-overlay .credits-content p:last-of-type {
  text-align:center;
}
#credits-overlay .credits-icon-container{margin-top:18px; display:flex; justify-content:center; align-items:center; pointer-events:none; opacity:0.9;}
#credits-overlay .credits-icon-container img{width:82px; height:82px; object-fit:contain; filter:drop-shadow(0 0 6px rgba(50,255,79,0.4));}
#credits-overlay h2{ margin:0 0 6px; font-family:'RAMI',serif; letter-spacing:6px; font-size:30px; text-align:center; animation:title-spectrum 24s linear infinite; }
@media (max-width:600px){
  #credits-button{ left:50%; bottom:6px; top:auto; transform:translateX(-50%); }
  #credits-overlay .credits-inner{ width:92vw; padding:20px 22px 28px; }
  #credits-overlay .credits-content{ font-size:14px; gap:12px; }
  #credits-overlay h2{ font-size:24px; letter-spacing:4px; }
  #credits-button img{ width:110px; height:110px; }
}

/* Removed tap/click instruction styles */

/* Responsive adjustments */
@media (max-width:768px){
  #artwork-media{max-width:100vw!important;max-height:100vh!important;width:100vw;height:100vh;object-fit:contain;object-position:center;position:absolute;inset:0;}
  /* Ensure centered text containers on mobile */
  #artwork-title,#artwork-meta{left:0!important; right:0; width:100vw; transform:none!important; text-align:center;}
  #artwork-title{font-size:18px;bottom:60px;}
  #artwork-meta{font-size:12px;bottom:34px;}
  #bottom-right-text{font-size:12px;bottom:15px;right:15px;}
  /* Removed tap/click responsive adjustments */
  #portfolio-loading-video{width:100vw!important;height:100vh!important;object-fit:cover;object-position:center;position:absolute;inset:0;}
  /* Reserve vertical space for captions so they don't overlap tall images */
  :root { --text-zone: 140px; }
  #artwork-display{height:100vh; padding-bottom:calc(var(--text-zone) * 0.65 + env(safe-area-inset-bottom)); box-sizing:border-box;}
  /* Constrain media height to leave space for text zone */
  #artwork-media{max-height:calc(100vh - var(--text-zone) * 0.65 - env(safe-area-inset-bottom)); position:relative; inset:auto;}
  /* Adjust title/meta bottoms relative to safe area */
  #artwork-title{bottom:calc(62px + env(safe-area-inset-bottom));}
  #artwork-meta{bottom:calc(36px + env(safe-area-inset-bottom));}
}

/* Tablet layout tuning: prevent artwork overlapping titles/meta (keeps phones and desktop unchanged) */
@media (min-width: 769px) and (max-width: 1200px){
  :root { --text-zone: 160px; }
  #artwork-display{ height:100vh; padding-bottom:calc(var(--text-zone) * 0.6 + env(safe-area-inset-bottom)); box-sizing:border-box; }
  /* Constrain media more on tablets to leave space for captions */
  #artwork-media{ max-width:78vw !important; max-height:calc(100vh - var(--text-zone) * 0.6 - env(safe-area-inset-bottom)) !important; }
}
@media (max-width:480px){
  #artwork-title,#artwork-meta{left:0!important; right:0; width:100vw; transform:none!important; text-align:center;}
  #artwork-title{font-size:16px;bottom:calc(52px + env(safe-area-inset-bottom));}
  #artwork-meta{font-size:11px;bottom:calc(28px + env(safe-area-inset-bottom));}
  #bottom-right-text{font-size:10px;bottom:10px;right:10px;}
  /* Removed tap/click responsive adjustments */
}
@media (max-width:768px) and (orientation:landscape){ 
  :root { --text-zone: 110px; }
  #artwork-title,#artwork-meta{left:0!important; right:0; width:100vw; transform:none!important; text-align:center;}
  #artwork-title{bottom:calc(44px + env(safe-area-inset-bottom));font-size:16px;}
  #artwork-meta{bottom:calc(24px + env(safe-area-inset-bottom));}
  #artwork-media{max-height:calc(100vh - var(--text-zone) * 0.7 - env(safe-area-inset-bottom));}
}
@media (max-width:768px) and (orientation:portrait){ 
  :root { --text-zone: 150px; }
  #artwork-title,#artwork-meta{left:0!important; right:0; width:100vw; transform:none!important; text-align:center;}
  #artwork-title{bottom:calc(64px + env(safe-area-inset-bottom));font-size:17px;}
  #artwork-meta{bottom:calc(34px + env(safe-area-inset-bottom));}
  #artwork-media{max-height:calc(100vh - var(--text-zone) * 0.65 - env(safe-area-inset-bottom));}
}

/* Hide artwork title and description (meta) entirely */
#artwork-title, #artwork-meta { display: none !important; }

/* (icons all enabled) */

/* Top icon row (non-model pages) */
/* Global top icon row */
.top-icon-row { position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:10005; display:flex; gap:42px; align-items:center; }
.top-icon-row button { position:static !important; top:auto !important; left:auto !important; margin:0; }
.top-icon-row .rotwrap { display:inline-block; animation:spin-360 12s linear infinite; }
.top-icon-row .rotwrap.slow { animation-duration:14s; }
.top-icon-row .rotwrap.medium { animation-duration:11s; }
.top-icon-row .rotwrap.fast { animation-duration:8s; }
/* Remove bouncing motion for row icons */
body[data-mode="images"] #watch-button,
body[data-mode="images"] #fun-bouncer,
body[data-mode="animations"] #watch-button,
body[data-mode="animations"] #fun-bouncer { transition:none; }