/* Holo — iridescent edges that cycle hue; text stays solid. */
@property --holo-angle { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
:root { --t-font-display: "Sora", system-ui, sans-serif; --t-font-body: "Inter", system-ui, sans-serif; --t-max: 1120px; --t-radius: 20px; --t-radius-sm: 12px; --holo: conic-gradient(from var(--holo-angle), #ff6ec7, #ffd166, #7cf5ff, #a78bfa, #39ff88, #ff6ec7); }
body { animation: holo-turn 14s linear infinite; }
@keyframes holo-turn { to { --holo-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }

/* foil edges: a 1.5px gradient border via background layering */
.t-foil, .card, .t-quote, .t-timeline__body, .t-chip, .t-link, .t-hero--foil .t-stats { position: relative; border: 1.5px solid transparent; background: linear-gradient(var(--t-surface), var(--t-surface)) padding-box, var(--holo) border-box; box-shadow: none; }
.t-chip { background: linear-gradient(var(--t-surface2), var(--t-surface2)) padding-box, var(--holo) border-box; }
.t-timeline__body { padding: 14px 16px; border-radius: var(--t-radius-sm); }
.t-hero--foil .t-cover { aspect-ratio: 16 / 6; max-height: 400px; opacity: .85; mask-image: linear-gradient(to bottom, #000 50%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent); }
.t-hero--foil .t-hero__inner { margin-block-start: clamp(-80px, -10vw, -140px); position: relative; z-index: 1; gap: 24px; }
.t-hero--foil .t-hero__media { padding: 5px; border-radius: 50%; background: var(--holo); width: fit-content; margin: 0; box-shadow: 0 20px 60px -20px rgba(255,110,199,.5); }
.t-hero--foil .t-photo { width: clamp(112px, 16vw, 160px); border-radius: 50%; box-shadow: 0 0 0 4px var(--t-bg); }
.t-hero--foil .t-name { font-weight: 800; font-size: clamp(2.6rem, 6.5vw, 4.6rem); letter-spacing: -0.03em; }
.t-hero--foil .t-name::after { content: ""; display: block; width: 120px; height: 6px; margin-block-start: 10px; border-radius: 3px; background: var(--holo); }
.t-hero--foil .t-headline { font-weight: 500; }
.t-hero--foil .t-stats { padding: 16px 24px; border-radius: var(--t-radius); gap: 24px 40px; }
.t-hero--foil .t-stats strong { font-weight: 800; }
.btn-primary { background: var(--holo); border: 0; color: #111; --bs-btn-color: #111; --bs-btn-hover-color: #111; --bs-btn-active-color: #111; font-weight: 800; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline-primary { border: 1.5px solid transparent; background: linear-gradient(var(--t-bg), var(--t-bg)) padding-box, var(--holo) border-box; --bs-btn-color: var(--t-text); --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--t-text); }

.t-section__title { font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; }
.t-section__title::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--holo); flex: none; }
.t-section--summary .t-section__title { display: none; }
.t-summary { font-family: var(--t-font-display); font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 600; max-width: 40ch; line-height: 1.3; }
.t-gallery__item figure { border: 1.5px solid transparent; background: var(--holo) border-box; padding: 1.5px; }
.t-gallery__item figure img { border-radius: calc(var(--t-radius-sm) - 1px) calc(var(--t-radius-sm) - 1px) 0 0; }
/* captions sit on a solid surface inside the foil frame — text never reads over the gradient */
.t-gallery figcaption { background: var(--t-surface); padding: 10px 12px 12px; border-radius: 0 0 calc(var(--t-radius-sm) - 1px) calc(var(--t-radius-sm) - 1px); }
.t-footer { border: 0; }
[data-mode="light"] .btn-primary { color: #111; }

/* the holographic pass (the Holo signature) */
.t-hero--pass .t-hero__inner { grid-template-columns: 1fr; gap: 24px; padding-block: clamp(28px, 5vw, 64px) 16px; perspective: 1400px; }
.t-hpass { display: grid; border: 2px solid transparent; background: linear-gradient(var(--t-surface), var(--t-surface)) padding-box, var(--holo) border-box; border-radius: var(--t-radius); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); transform: rotateX(4deg) rotateY(-6deg); transition: transform .6s var(--t-ease); position: relative; }
.t-hpass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 48%, transparent 60%); pointer-events: none; }
.t-hpass:hover { transform: rotateX(-3deg) rotateY(5deg); }
@media (prefers-reduced-motion: reduce) { .t-hpass, .t-hpass:hover { transform: none; } }
@media (min-width: 860px) { .t-hpass { grid-template-columns: minmax(0, 1fr) auto 220px; } }
.t-hpass__main { display: grid; gap: 18px; padding: clamp(18px, 3vw, 28px); align-items: center; }
@media (min-width: 600px) { .t-hpass__main { grid-template-columns: auto minmax(0, 1fr) auto; } }
.t-hpass__photo { padding: 4px; border-radius: 16px; background: var(--holo); width: fit-content; }
.t-hpass__photo .t-photo { width: clamp(96px, 14vw, 136px); border-radius: 12px; box-shadow: 0 0 0 3px var(--t-surface); }
.t-hpass__id .t-name { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.t-hpass__id .t-name::after { display: none; }
.t-hpass__chip { width: 46px; height: 36px; border-radius: 6px; background: var(--holo); position: relative; }
.t-hpass__chip::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(0,0,0,.35); border-radius: 3px; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(0,0,0,.25) 8px 9px); }
.t-hpass__perf { border-inline-start: 2px dashed color-mix(in srgb, var(--t-text) 35%, transparent); position: relative; }
@media (max-width: 859px) { .t-hpass__perf { border: 0; border-block-start: 2px dashed color-mix(in srgb, var(--t-text) 35%, transparent); } }
.t-hpass__stub { background: var(--t-surface2); padding: 18px 20px; display: grid; gap: 10px; align-content: center; }
.t-hpass__word { font-family: var(--t-font-display); font-weight: 800; font-size: 11px; letter-spacing: .3em; color: var(--t-accent-text); }
.t-hpass__stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.t-hpass__stats li { display: flex; align-items: baseline; gap: 8px; }
.t-hpass__stats strong { font-family: var(--t-font-display); font-weight: 800; font-size: var(--t-size-4); }
.t-hpass__stats span { font-size: var(--t-size-0); color: var(--t-muted); }
.t-hpass__code { font-family: ui-monospace, monospace; font-size: var(--t-size-0); letter-spacing: .14em; color: var(--t-muted); }
.t-hpass__below { display: grid; gap: 12px; }
.t-hpass__below .t-tagline, .t-hpass__below .t-actions, .t-hpass__below .t-links--hero { margin: 0; }