:root {
  --bg: #0c1519;
  --bg-elevated: #14262c;
  --text: #e6f2ef;
  --muted: #8ea6a8;
  --accent: #f2c14e;
  --accent-ink: #2a1f00;
  --sea: #5fb8a6;
  --border: rgba(223, 241, 238, 0.09);
  --trail: rgba(95, 184, 166, 0.45);
  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600'%3E%3Cg fill='none' stroke='%235fb8a6' stroke-opacity='.28' stroke-width='1.3'%3E%3Cpath d='M636 300 L636 304 L636 308 L635 312 L633 316 L630 320 L627 323 L623 326 L619 328 L615 331 L610 333 L606 334 L602 336 L598 337 L594 339 L590 341 L587 342 L583 344 L579 345 L575 347 L571 348 L567 349 L562 349 L558 349 L553 349 L549 349 L545 348 L540 346 L536 345 L533 343 L529 342 L525 340 L522 338 L518 336 L514 334 L511 332 L507 329 L504 327 L501 324 L499 321 L497 318 L495 314 L493 311 L492 307 L492 304 L492 300 L492 296 L492 293 L492 289 L493 285 L493 281 L494 278 L496 274 L498 270 L500 266 L503 263 L506 260 L510 257 L515 255 L519 254 L525 253 L530 252 L535 252 L540 253 L545 253 L550 254 L554 255 L558 256 L562 257 L566 258 L570 258 L573 259 L577 259 L581 259 L585 260 L590 261 L594 262 L598 263 L602 264 L606 266 L610 268 L613 270 L617 273 L620 275 L623 278 L626 281 L629 285 L631 288 L633 292 L635 296Z'/%3E%3Cpath d='M674 300 L674 306 L673 312 L671 318 L668 324 L664 329 L659 334 L653 338 L647 342 L640 345 L634 348 L628 350 L622 353 L616 355 L611 358 L605 360 L600 363 L594 365 L588 367 L583 370 L576 371 L570 373 L563 373 L557 374 L550 373 L543 372 L537 371 L531 369 L525 367 L519 365 L513 362 L508 360 L502 357 L497 354 L491 351 L486 348 L481 344 L476 340 L472 336 L468 332 L465 327 L462 322 L460 316 L459 311 L458 305 L458 300 L458 295 L458 289 L459 283 L459 278 L460 272 L462 266 L464 261 L467 255 L471 250 L475 245 L480 241 L486 237 L493 234 L500 232 L508 231 L516 230 L523 230 L531 231 L538 232 L545 233 L551 234 L557 235 L563 236 L569 237 L574 237 L580 238 L586 238 L592 239 L598 240 L605 241 L611 242 L617 244 L623 246 L629 249 L635 252 L640 255 L645 259 L650 263 L655 267 L660 272 L664 277 L667 282 L671 288 L673 294Z'/%3E%3Cpath d='M712 300 L712 308 L710 316 L707 324 L702 331 L696 338 L689 344 L681 350 L673 354 L665 359 L657 362 L649 366 L641 369 L634 373 L627 376 L620 380 L613 383 L605 386 L598 390 L590 393 L582 395 L573 397 L564 397 L556 398 L547 397 L538 396 L530 394 L521 392 L513 389 L505 386 L498 383 L490 380 L483 376 L475 373 L468 369 L460 364 L454 359 L447 354 L442 348 L437 342 L433 336 L430 329 L427 322 L426 315 L425 307 L424 300 L424 293 L424 285 L425 278 L426 270 L427 263 L429 255 L432 248 L436 241 L441 234 L447 227 L455 222 L463 217 L472 214 L482 211 L492 210 L502 209 L512 209 L522 210 L531 211 L540 212 L548 214 L556 215 L564 216 L571 216 L579 217 L587 217 L595 217 L603 218 L612 219 L620 220 L628 222 L637 224 L645 228 L653 231 L660 235 L668 240 L675 245 L682 250 L688 256 L694 262 L700 269 L704 276 L708 284 L711 292Z'/%3E%3Cpath d='M750 300 L750 310 L747 320 L742 330 L736 339 L728 347 L719 354 L709 361 L699 367 L689 372 L679 377 L669 381 L660 386 L651 390 L643 394 L634 399 L626 404 L617 408 L607 412 L597 416 L587 418 L576 420 L566 421 L554 422 L544 421 L533 419 L522 417 L512 414 L502 411 L492 408 L482 404 L472 400 L462 396 L453 392 L443 387 L434 381 L426 375 L418 368 L411 361 L405 353 L400 345 L397 336 L394 327 L392 318 L391 309 L390 300 L390 291 L390 282 L391 272 L392 263 L394 254 L397 244 L401 235 L406 226 L412 217 L420 210 L430 203 L440 198 L452 194 L464 191 L477 189 L489 189 L502 189 L513 190 L525 191 L535 192 L545 193 L555 194 L565 195 L574 195 L584 195 L594 195 L604 196 L615 196 L625 197 L636 199 L646 202 L657 205 L667 209 L677 213 L686 218 L696 224 L705 230 L713 237 L722 245 L729 253 L736 261 L742 270 L746 280 L749 290Z'/%3E%3Cpath d='M788 300 L787 312 L783 324 L776 335 L768 346 L758 356 L747 364 L736 372 L724 379 L712 385 L700 391 L689 396 L679 401 L669 407 L659 413 L649 418 L639 424 L628 429 L617 434 L605 439 L593 442 L580 444 L567 445 L553 445 L540 445 L527 443 L515 440 L502 437 L490 434 L478 430 L466 426 L454 421 L442 416 L430 411 L419 405 L408 398 L398 391 L389 382 L380 373 L374 364 L368 354 L364 343 L361 333 L359 322 L357 311 L356 300 L356 289 L356 278 L357 267 L358 256 L361 244 L364 233 L369 222 L375 211 L384 201 L394 193 L405 185 L418 179 L432 174 L447 171 L462 169 L477 169 L491 169 L505 170 L518 171 L531 172 L543 173 L554 174 L566 174 L577 174 L589 173 L601 173 L613 173 L626 174 L639 175 L652 178 L665 181 L677 185 L690 189 L702 195 L713 201 L725 208 L735 216 L746 224 L756 233 L765 243 L773 253 L780 264 L785 276 L788 288Z'/%3E%3Cpath d='M826 300 L823 314 L818 328 L810 341 L800 353 L788 364 L775 374 L761 382 L747 390 L734 397 L721 404 L709 411 L697 417 L686 424 L675 431 L664 438 L652 445 L639 451 L626 457 L612 462 L598 466 L583 468 L568 469 L552 469 L537 468 L522 466 L507 464 L492 460 L478 456 L464 452 L449 448 L435 443 L421 437 L407 431 L394 424 L381 416 L369 407 L359 397 L350 386 L342 375 L336 363 L331 350 L328 338 L325 325 L324 313 L323 300 L322 287 L322 274 L323 261 L325 248 L327 235 L332 222 L338 209 L346 197 L356 186 L368 176 L382 167 L397 161 L413 156 L431 152 L448 151 L465 150 L481 150 L497 151 L512 152 L526 152 L540 153 L553 153 L567 152 L580 152 L594 151 L608 151 L623 151 L638 151 L653 153 L668 156 L683 159 L698 164 L713 170 L727 176 L741 183 L754 192 L767 201 L779 210 L791 221 L801 232 L810 245 L818 258 L823 272 L826 286Z'/%3E%3Cpath d='M863 300 L859 316 L852 332 L842 346 L830 359 L816 372 L801 382 L786 392 L770 401 L756 409 L742 417 L728 425 L716 433 L703 441 L691 449 L678 458 L665 466 L651 473 L636 480 L620 485 L603 489 L586 492 L569 493 L551 493 L534 492 L516 490 L499 487 L482 484 L466 480 L449 475 L432 470 L416 465 L399 458 L383 451 L368 443 L353 433 L340 423 L329 411 L319 399 L310 386 L304 372 L299 358 L295 343 L292 329 L290 315 L289 300 L288 285 L288 271 L289 256 L291 241 L294 226 L299 211 L306 196 L316 183 L328 170 L342 160 L359 150 L376 143 L395 138 L415 134 L434 132 L453 132 L472 132 L489 132 L506 132 L522 133 L537 132 L552 132 L568 130 L583 129 L599 128 L616 127 L633 127 L650 128 L668 130 L685 133 L703 137 L720 143 L736 149 L753 157 L768 165 L784 175 L799 185 L813 197 L826 209 L838 222 L848 236 L856 252 L861 267 L864 284Z'/%3E%3Cpath d='M899 300 L893 318 L884 335 L872 351 L858 366 L843 379 L826 391 L809 402 L793 412 L777 421 L762 430 L748 439 L734 449 L721 458 L707 468 L693 477 L678 487 L662 495 L646 502 L628 509 L609 513 L590 516 L570 518 L550 518 L530 516 L511 514 L492 511 L472 508 L453 503 L434 499 L415 493 L396 487 L377 480 L359 472 L342 462 L326 451 L311 439 L299 426 L288 411 L279 396 L272 381 L266 365 L262 349 L259 333 L257 316 L255 300 L254 284 L254 267 L255 250 L257 233 L261 216 L267 200 L276 184 L287 169 L301 155 L318 144 L336 134 L357 126 L378 121 L400 117 L421 115 L442 114 L462 114 L481 113 L499 113 L517 113 L534 111 L551 110 L569 108 L587 106 L605 104 L624 103 L643 103 L663 104 L683 106 L702 110 L722 115 L741 121 L760 129 L779 137 L797 147 L814 158 L831 170 L847 183 L862 197 L875 212 L886 228 L894 245 L899 263 L901 282Z'/%3E%3Cpath d='M934 300 L927 320 L916 338 L902 356 L886 372 L868 386 L850 399 L832 411 L814 422 L798 433 L782 443 L767 454 L753 464 L738 475 L724 487 L708 497 L692 508 L674 517 L655 525 L635 532 L614 537 L593 540 L571 542 L549 542 L527 541 L505 539 L484 536 L462 532 L440 528 L419 523 L397 517 L376 510 L355 502 L335 493 L315 482 L298 469 L282 455 L269 440 L257 424 L248 407 L240 390 L234 372 L230 354 L226 336 L224 318 L222 300 L220 282 L220 263 L221 245 L223 226 L228 207 L235 189 L246 171 L259 155 L275 141 L294 128 L315 118 L338 110 L361 104 L385 100 L408 98 L431 96 L453 96 L473 95 L493 94 L512 92 L531 90 L550 87 L570 85 L590 82 L610 80 L632 79 L654 78 L676 80 L698 82 L720 87 L742 92 L764 100 L785 108 L806 118 L826 128 L845 140 L864 154 L882 168 L898 184 L912 201 L924 220 L932 239 L937 259 L937 280Z'/%3E%3Cpath d='M968 300 L958 321 L945 342 L930 360 L912 378 L892 393 L873 407 L854 420 L835 432 L818 444 L802 456 L786 468 L771 480 L756 493 L740 506 L723 518 L705 529 L686 540 L665 549 L643 556 L620 561 L596 565 L572 566 L548 567 L524 566 L500 564 L475 561 L451 557 L427 553 L403 548 L379 541 L355 534 L332 525 L310 514 L289 501 L270 487 L253 471 L239 454 L227 436 L217 418 L209 398 L203 379 L198 359 L194 340 L191 320 L188 300 L186 280 L186 260 L187 239 L190 218 L195 198 L204 178 L216 159 L231 142 L250 127 L271 114 L295 103 L319 95 L345 88 L371 84 L396 81 L420 79 L443 78 L465 76 L487 74 L508 71 L528 68 L549 64 L571 61 L593 57 L616 55 L640 53 L664 53 L689 55 L713 58 L738 63 L762 69 L786 77 L810 87 L833 97 L855 109 L877 123 L898 138 L917 154 L935 172 L950 191 L962 211 L970 233 L973 255 L973 278Z'/%3E%3Cpath d='M1000 300 L989 323 L974 345 L956 365 L936 383 L916 400 L895 415 L875 429 L856 442 L838 456 L822 469 L806 483 L790 497 L774 511 L757 525 L739 538 L719 551 L698 562 L675 572 L651 580 L625 585 L600 589 L573 591 L547 592 L520 591 L494 589 L467 586 L441 583 L414 578 L387 573 L360 566 L334 558 L309 547 L285 535 L262 521 L242 505 L224 488 L209 469 L197 449 L187 428 L178 407 L172 386 L166 364 L162 343 L158 322 L155 300 L152 278 L152 256 L153 233 L156 211 L163 189 L173 168 L187 148 L205 129 L225 113 L249 99 L275 88 L302 80 L330 73 L357 68 L384 65 L409 62 L434 60 L457 57 L480 53 L503 49 L525 45 L548 40 L572 36 L597 32 L622 29 L648 27 L675 27 L702 29 L729 33 L756 39 L783 46 L809 55 L835 65 L860 77 L885 90 L909 105 L932 121 L953 139 L972 159 L987 180 L999 203 L1006 227 L1009 251 L1007 276Z'/%3E%3Cpath d='M1031 300 L1017 325 L1000 348 L981 369 L960 388 L938 406 L916 422 L896 437 L877 452 L859 467 L842 482 L826 497 L809 513 L792 529 L774 544 L755 559 L733 573 L710 585 L685 596 L658 604 L631 610 L603 614 L574 616 L546 617 L517 617 L488 615 L459 613 L429 609 L400 605 L371 599 L341 591 L313 582 L285 570 L260 557 L236 541 L215 523 L196 503 L180 482 L167 461 L157 438 L148 415 L141 392 L135 370 L129 347 L125 323 L121 300 L119 276 L118 252 L119 228 L124 204 L131 180 L143 157 L159 136 L179 117 L202 100 L228 86 L256 74 L285 65 L314 58 L343 53 L371 49 L398 45 L424 41 L449 37 L473 32 L497 27 L522 21 L547 15 L573 10 L600 6 L628 2 L657 1 L686 1 L716 3 L745 8 L775 14 L804 22 L833 32 L861 43 L889 56 L916 70 L942 87 L966 105 L989 125 L1008 147 L1024 170 L1036 195 L1042 221 L1044 248 L1040 274Z'/%3E%3C/g%3E%3C/svg%3E");
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  background-image: radial-gradient(ellipse at 80% -10%, rgba(95, 184, 166, 0.10), transparent 55%);
  background-attachment: fixed;
}

a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, .card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 2rem;
}
.topbar-end { justify-content: flex-end; border-bottom: none; }
.topbar a, .back { color: var(--muted); text-decoration: none; font-size: 0.9rem; transition: color 0.15s ease; }
.topbar a:hover, .back:hover { color: var(--accent); }
.back {
  padding: 0.45rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(20, 38, 44, 0.55);
}
.back:hover { border-color: var(--accent); }
.topbar a.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-align: right;
  color: var(--text);
}
.topbar a.brand:hover { color: var(--accent); }

/* ---- Hero (landing) ---- */

/* Logout link floats over the photo */
.topbar-end { position: absolute; top: 0; right: 0; z-index: 5; }
.topbar-end a { color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(380px, 68vh, 720px);
  /* full-bleed photo, text still aligned with the 1400px content column */
  padding: clamp(5rem, 12vw, 8rem) max(2rem, calc((100% - 1400px) / 2 + 2rem)) clamp(2rem, 5vw, 3.5rem);
}

/* The photo: fade-in, then a slow "Ken Burns" drift */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../landing-photo.php") center 40% / cover no-repeat;
  transform-origin: 60% 40%;
  animation:
    hero-photo-in 1.6s ease-out both,
    hero-kenburns 28s ease-in-out 1.6s infinite alternate;
  will-change: transform;
}

/* Dark gradient for legibility + fade into the page background */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(12,21,25,.75) 22%, rgba(12,21,25,.15) 60%, rgba(12,21,25,.35) 100%),
    linear-gradient(to right, rgba(12,21,25,.55), transparent 65%);
  pointer-events: none;
}

.hero-title {
  margin: 0;
  max-width: 13em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 8.5vw, 6.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
  animation: hero-in 1s 0.35s cubic-bezier(.2,.7,.2,1) both;
}
/* golden underline that draws itself */
.hero-title::after {
  content: '';
  display: block;
  width: clamp(4rem, 12vw, 8rem);
  height: 4px;
  margin-top: 1.1rem;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: left;
  animation: hero-line 0.9s 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.hero-sub {
  margin: 1.2rem 0 0;
  max-width: 34rem;
  font-size: 1.1rem;
  line-height: 1.5;
  color: rgba(230, 242, 239, 0.88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  animation: hero-in 1s 0.7s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes hero-photo-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-2%, -1.5%, 0); }
}
@keyframes hero-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

main { padding: 0 2rem 3rem; max-width: 1400px; margin: 0 auto; }

.category { margin-top: 3rem; }
.category:first-child { margin-top: 2.2rem; }
.category-title {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  margin: 0 0 1.2rem;
  color: var(--text);
}
.category-title::after {
  content: '';
  order: 1;
  flex: 1;
  height: 0;
  border-top: 2px dashed var(--trail);
}
.category-count {
  order: 2;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 400;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.4rem;
}
.card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  background: var(--bg-elevated);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #1d3a42, #0f1d22);
}
.thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.card:hover .thumb img { transform: scale(1.04); }
.thumb > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--muted);
}
.card .title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2rem 0.9rem 0.75rem;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.3;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

/* ---- Video page ---- */

.player-page {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 1.5rem 2rem 3rem;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
}

.player-main {
  flex: 3 1 480px;
  min-width: 0;
  animation: hero-in 0.7s cubic-bezier(.2,.7,.2,1) both;
}

.player-frame {
  position: relative;
  /* The frame has a fixed shape (the video's real aspect ratio, set by
     player.js via --ar), so it never resizes between poster and playback.
     Portrait/tall videos are narrowed so they stay under 75vh. */
  --ar: 1.7778;
  aspect-ratio: var(--ar);
  width: min(100%, calc(75vh * var(--ar)));
  margin: 0 auto;
  /* The poster image is painted here (set by player.js), trimmed to fill
     the frame: background-size: cover crops, never stretches. */
  background: #000 center / cover no-repeat;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--border),
    0 24px 60px rgba(0, 0, 0, 0.5),
    0 0 90px rgba(95, 184, 166, 0.10);
}

#player {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Transparent until playback starts, so the frame's poster background
     (which is cropped to fill, never letterboxed) shows through. */
  background: transparent;
  /* The video itself is never cropped. */
  object-fit: contain;
}
#player.is-playing,
#player:fullscreen,
#player:-webkit-full-screen {
  background: #000;
}

.player-meta {
  margin-top: 1.4rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.video-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 2.1rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.video-title::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: 0.7rem;
  border-radius: 2px;
  background: var(--accent);
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.quality-select {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.quality-select:hover { border-color: var(--accent); }

.player-status { font-size: 0.8rem; color: var(--muted); }

.video-description {
  flex: 1 1 260px;
  max-width: 360px;
  position: sticky;
  top: 1.25rem;
  background: linear-gradient(160deg, var(--bg-elevated), rgba(20, 38, 44, 0.6));
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 1.3rem 1.5rem;
  animation: hero-in 0.7s 0.15s cubic-bezier(.2,.7,.2,1) both;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
}
.description-title {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--accent);
}
.video-description p { margin: 0 0 0.8rem; }

/* Poster overlay + play button, shown above the <video> until first play
   (created by player.js). */
.player-poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #000 center / cover no-repeat;
}
.player-poster[hidden] { display: none; }
.player-poster::before {
  content: '';
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(12, 21, 25, 0.6);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75);
  transition: background 0.15s ease, transform 0.15s ease;
}
.player-poster::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 0.9rem 0 0.9rem 1.5rem;
  border-color: transparent transparent transparent #fff;
}
.player-poster:hover::before { background: var(--accent); transform: scale(1.06); }
.player-poster:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* ---- Ambient glow: the movie's thumbnail, blurred, behind the page ---- */
/* Fixed to the viewport (never takes space in the page flow) and faded out. */
.ambient {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 70vh;
  max-width: none;
  object-fit: cover;
  z-index: -1;
  transform: scale(1.3);
  filter: blur(70px) saturate(1.4);
  opacity: 0.28;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  animation: hero-photo-in 1.6s ease-out both;
}

/* ---- "À voir aussi" thumbnails under the player ---- */
.suggestions { margin-top: 2.4rem; }
.suggestions-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
}
.suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.suggestions .card:nth-child(n) { animation-delay: 0.25s; }
.video-description p:last-child { margin-bottom: 0; }

/* ---- Video page, narrow layout ----
   Below ~900px the description no longer fits beside the player (it would
   wrap underneath everything). Instead of letting it fall below "À voir
   aussi", flatten .player-main with display: contents and use `order` so
   the sequence is: player, title/quality, À propos, À voir aussi. */
@media (max-width: 900px) {
  .player-page { flex-direction: column; align-items: stretch; gap: 1.5rem; }
  .player-main { display: contents; }
  .player-frame, .player-meta { order: 1; }
  .video-description { order: 2; position: static; max-width: none; width: 100%; flex: 0 0 auto; }
  .suggestions { order: 3; margin-top: 0.5rem; }
}

@media (max-width: 720px) {
  .player-page { padding: 0.75rem 1rem 1.5rem; }
  .player-frame { border-radius: 12px; }
  .ambient { height: 50vh; }
  .suggestions-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .video-title { font-size: 1.6rem; }
  main { padding: 0 1rem 1.5rem; }
  .topbar { padding: 1rem; }
  .hero { padding-left: 1rem; padding-right: 1rem; min-height: 320px; }
  .hero::before { background-position: center 30%; }

  .category { margin-top: 2.2rem; }
  .category-title { font-size: 1.3rem; gap: 0.6rem; margin-bottom: 0.9rem; }
  .category-count { font-size: 0.72rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; }
  .card .title { padding: 1.5rem 0.7rem 0.6rem; font-size: 0.85rem; }
}

@media (max-width: 560px) {
  .topbar a.brand { display: none; }
}

@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Login ---- */

.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2rem 1rem;
}
.login-body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--topo) no-repeat center / cover;
  opacity: 0.9;
  pointer-events: none;
}
.login-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
  width: 100%;
}
.login-title {
  margin: 0;
  max-width: 12em;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 8vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  animation: hero-in 0.9s ease-out both;
}
.login-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 2rem;
  border-radius: 14px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
}
.login-card label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.login-card input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem;
  color: var(--text);
  font-size: 1rem;
}
.login-card button {
  background: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 0.7rem;
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
.login-card button:hover { filter: brightness(1.08); }
.login-card .error { color: #ff8a80; font-size: 0.85rem; margin: 0; }

/* ---- Cards: gentle staggered entrance ---- */
.card { animation: hero-in 0.6s cubic-bezier(.2,.7,.2,1) both; }
.card:nth-child(1) { animation-delay: 0.9s; }
.card:nth-child(2) { animation-delay: 1.0s; }
.card:nth-child(3) { animation-delay: 1.1s; }
.card:nth-child(4) { animation-delay: 1.2s; }
.card:nth-child(n+5) { animation-delay: 1.3s; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}