/* =============================
   Presentation CSS — Pure CSS
   ============================= */
:root{
  color-scheme: light dark;
  --bg: #0b0d10;
  --panel: #12151b;
  --ink: #e8ecf3;
  --muted: #a6afbf;
  --brand: #7cf6d2;
  --brand-2: #b57cff;
  --ok: #2bd576;
  --warn: #ffb02e;
  --accent: #3aaef8;
  --stroke: color-mix(in oklab, var(--ink) 8%, transparent);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius-xl: 20px;
  --radius: 14px;
  --gap: clamp(.8rem, 2vw, 1.2rem);

}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 10% -10%, rgba(122,255,210,.08), transparent 50%),
              radial-gradient(1000px 600px at 120% 10%, rgba(181,124,255,.08), transparent 40%),
              var(--bg);
  color: var(--ink);
}

/* Header */
.site-header{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:1rem;
  padding: clamp(1rem, 3vw, 1.75rem);
  position: sticky; top:0; z-index: 10;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,12,16,.8), rgba(10,12,16,.35));
  border-bottom: 1px solid var(--stroke);
}
.brand{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.9rem}
.logo-orb{
  width:44px; aspect-ratio:1; border-radius:50%;
  background:
    conic-gradient(from 180deg, var(--brand), var(--brand-2) 35%, var(--accent)),
    radial-gradient(circle at 30% 30%, #fff8, transparent 40%);
  box-shadow: 0 0 0 2px #ffffff12 inset, 0 10px 30px #0008, 0 0 18px color-mix(in oklab, var(--brand) 40%, transparent);
  animation: spin 10s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg)} }
h1{margin:.1rem 0 0;font-weight:750;letter-spacing:.3px}
.tagline{margin:0;color:var(--muted);font-size:.95rem}

.site-nav{display:flex; gap:.6rem; flex-wrap:wrap}
.site-nav a{
  display:inline-block; padding:.6rem .9rem; border-radius:999px;
  border:1px solid var(--stroke); color:inherit; text-decoration:none;
  transition: transform .15s ease, background .25s ease;
}
.site-nav a:hover{ transform: translateY(-1px); background:#ffffff08}

/* Sections */
.section{padding: clamp(1rem, 4.5vw, 3rem) clamp(1rem, 4.5vw, 3rem)}
.section-head{max-width: 70ch; margin-bottom: 1rem}
.section h2{font-size: clamp(1.4rem, 3.2vw, 2rem); margin:.2rem 0 .25rem}
.section p{color:var(--muted)}

.media-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.card{
  grid-column: span 6;
  background: linear-gradient(180deg, #161a22, #12151b);
  border:1px solid var(--stroke);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: clip;
  display:flex; flex-direction:column;
  min-height: 280px;
  outline: 1px solid #ffffff10;
  outline-offset: -1px;
  transition: transform .25s ease, box-shadow .25s ease, outline-color .25s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,.45); outline-color: #ffffff18}
.card-head{display:flex; align-items:center; gap:.8rem; padding:1rem 1rem .25rem}
.card-head .icon{font-size:2.1rem; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.card h3{margin:.25rem 0 .35rem}
.card-body{padding: .5rem 1rem 1rem; flex:1}
.card-foot{
  display:flex; gap:.6rem; padding: .75rem 1rem 1rem;
  border-top: 1px solid var(--stroke);
}
.btn{
  display:inline-block; padding:.6rem .9rem; border-radius: 12px; text-decoration:none;
  border:1px solid var(--stroke); color:inherit;
}
.btn.primary{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b0d10; font-weight:700 }
.btn.ghost:hover{ background:#ffffff0c }







/* Media frames */
.video-frame,.audio-frame{display:grid; gap:.5rem}
video, audio{
  width:100%; max-width:100%;
  border-radius: 12px;
  border:1px solid var(--stroke);
  background:#0e1116;
}
figcaption{color:var(--muted); font-size:.95rem}

/* Document preview */
.doc-preview{
  display:grid; gap:.5rem; padding: .75rem; border-radius: 12px;
  border:1px solid var(--stroke); background: #0e1116;
}
.highlights{margin:.25rem 0 0 1rem}

/* Color accents by type */
.media.video .icon{color: var(--accent)}
.media.music .icon{color: var(--brand-2)}
.media.audio .icon{color: var(--ok)}
.media.doc .icon{color: var(--warn)}

/* ===== Playful area ===== */
.playful{
  --rainbow: conic-gradient(from 0deg, #ff4d4d, #ff7a1a, #ffd11a, #2bd576, #3aaef8, #7c4dff, #ff4dff, #ff4d4d);
  background:
    radial-gradient(80% 60% at 50% 0%, #ffffff05 10%, transparent 70%);
  border-top: 1px solid var(--stroke);
}
.carousel-hint{opacity:.6; font-size:.92rem; margin-bottom:.5rem}
.media-carousel{
  display:grid;
  grid-auto-flow: column;
  gap: var(--gap);
  grid-auto-columns: clamp(240px, 60vw, 360px);
  overflow-x:auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding-bottom:.25rem;
}
.media-carousel .tile{
  scroll-snap-align: start;
  background: #0e1116;
  border:1px solid var(--stroke);
  border-radius: var(--radius-xl);
  padding:1rem;
  min-height: 180px;
  position:relative;
  isolation:isolate;
  transition: transform .25s ease, box-shadow .25s ease;
}
.media-carousel .tile::before{
  content:""; position:absolute; inset:-1px;
  background: linear-gradient(180deg, #ffffff06, transparent 40%);
  border-radius: inherit; z-index:-1;
}
.media-carousel .tile:hover{ transform: translateY(-4px); box-shadow: var(--shadow) }
.tile-icon{font-size:2rem; margin-bottom:.25rem}
.tile h3{margin:.25rem 0 .25rem}

.play-grid{
  margin-top: 1.2rem;
  display:grid; gap: var(--gap);
  grid-template-columns: repeat(12, 1fr);
}
.play-card{
  grid-column: span 4;
  background:#0f1318;border:1px solid var(--stroke);
  border-radius: var(--radius);
  padding:.75rem 1rem;
  transition: transform .2s ease;
}
.play-card[open]{transform: translateY(-2px)}
.play-card summary{cursor:pointer; list-style:none}
.play-card summary::-webkit-details-marker{display:none}
.play-card summary span{
  background: var(--rainbow); -webkit-background-clip:text; background-clip:text; color: transparent;
  font-weight:700;
}

/* About */
.about{border-top: 1px solid var(--stroke)}

/* Footer */
.site-footer{
  padding: 2rem 1rem; text-align:center; color:var(--muted);
  border-top: 1px solid var(--stroke);
}

/* Responsive */
@media (max-width: 1000px){
  .card{ grid-column: span 12 }
  .play-card{ grid-column: span 12 }
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important }
}

/* Print styles */
@media print{
  .site-header, .site-nav, .media-carousel, .playful .play-grid details[open] summary { display:none !important }
  .section{ padding: 0 }
  body{ background: #fff; color:#000 }
  .card, .play-card{ break-inside: avoid; box-shadow:none; background:#fff; border:1px solid #ccc }
}
