/* Front Benchers premium visual layer. Uses each page's existing theme variables. */
:root {
  --fb-depth-shadow: 0 24px 54px rgba(29,34,46,.12), 0 5px 14px rgba(29,34,46,.05);
  --fb-glass-border: rgba(255,255,255,.74);
  --fb-motion-fast: 180ms;
}

/* Homepage: warm paper, cinematic light and the existing interactive showcase. */
.homepage .hero-section {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 83% 18%, rgba(111,91,190,.11), transparent 30%),
    radial-gradient(ellipse at 18% 88%, rgba(255,121,0,.10), transparent 36%),
    linear-gradient(120deg,#fbf8f2 4%,#f7f5ef 58%,#f6f4f8 100%);
}
.homepage .hero-section::before,
.homepage .hero-section::after { position:absolute; z-index:-1; pointer-events:none; content:""; }
.homepage .hero-section::before {
  inset:0;
  background-image:linear-gradient(rgba(46,55,76,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(46,55,76,.035) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse at 70% 43%,#000 0%,transparent 70%);
  opacity:.62;
}
.homepage .hero-section::after {
  top:8%; right:6%; width:260px; height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,148,70,.20),rgba(118,89,213,.08) 42%,transparent 72%);
  filter:blur(12px);
  animation:fb-light-drift 16s ease-in-out infinite alternate;
}
.homepage .hero-content { position:relative; z-index:1; }
.homepage .hero-copy h1 { text-wrap:balance; }
.homepage .hero-copy h1 span {
  display:inline-block;
  background:linear-gradient(105deg,#9b4c0b 3%,#e16b17 49%,#7659d5 102%);
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.homepage .hero-learning-visual {
  position:relative;
  z-index:0;
}
.homepage .hero-showcase-flipper {
  border-color:rgba(255,255,255,.92);
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(255,252,246,.95) 70%,rgba(250,246,255,.92));
  box-shadow:0 26px 54px rgba(43,42,57,.13),0 7px 15px rgba(43,42,57,.05),inset 0 1px #fff;
}
.homepage .hero-showcase-icon { box-shadow:0 9px 20px color-mix(in srgb,var(--showcase-accent) 17%,transparent),inset 0 1px #fff; }
.homepage .hero-showcase-controls { border-color:rgba(125,113,99,.15); }
.homepage .hero-showcase-arrows button { box-shadow:0 5px 14px rgba(46,39,28,.07),inset 0 1px #fff; }
.homepage .site-header .main-nav a { transition:color .18s ease,background-color .18s ease; }
.homepage .brand-mark { box-shadow:0 7px 17px rgba(255,121,0,.2),inset 0 1px rgba(255,255,255,.48); }
.homepage .hero-buttons .orange-button,
.homepage .final-cta .cta-buttons .orange-button {
  border:1px solid rgba(151,72,9,.22);
  background:linear-gradient(135deg,#ff9a3d,#ff7900 58%,#e66c0b);
  box-shadow:0 12px 25px rgba(226,108,16,.22),inset 0 1px rgba(255,255,255,.48);
}
.homepage .hero-buttons .orange-button:hover,
.homepage .final-cta .cta-buttons .orange-button:hover { box-shadow:0 17px 31px rgba(226,108,16,.28),inset 0 1px rgba(255,255,255,.56); }

/* Distinct section canvases retain the existing cream, white and charcoal palette. */
.homepage .learning-comparison-section { background:linear-gradient(180deg,#fff 0%,#fbfaf7 100%); }
.homepage .ecosystem-section { background:radial-gradient(ellipse at 92% 8%,rgba(118,89,213,.075),transparent 36%),#fbfaf7; }
.homepage .courses-section { background-color:#f8f6f1; }
.homepage .advantages-section { background:linear-gradient(180deg,#fff 0%,#f8f7f3 100%); }
.homepage .why-front-benchers-section { background:radial-gradient(ellipse at 9% 16%,rgba(255,121,0,.06),transparent 35%),#f5f3ee; }
.homepage .final-cta-section { background:linear-gradient(180deg,#f5f3ee,#efede7); }
.homepage .final-cta {
  position:relative; isolation:isolate; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px 24px 24px 7px;
  background:radial-gradient(ellipse at 84% 0%,rgba(118,89,213,.32),transparent 38%),linear-gradient(120deg,#252831,#17191f 70%,#302626);
  box-shadow:0 28px 60px rgba(30,31,38,.2),inset 0 1px rgba(255,255,255,.13);
}
.homepage .final-cta::after {
  position:absolute; z-index:-1; right:-70px; bottom:-130px; width:340px; height:340px;
  border:1px solid rgba(255,255,255,.12); border-radius:50%;
  box-shadow:0 0 0 24px rgba(255,255,255,.025),0 0 0 52px rgba(255,255,255,.018);
  content:""; pointer-events:none;
}
.homepage .final-cta h2,.homepage .final-cta p { color:#fff; }
.homepage .final-cta p { color:rgba(255,255,255,.72); }
.homepage .final-cta .cta-buttons .outline-button { border-color:rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.06); }
.homepage .site-footer { background:linear-gradient(145deg,#232528,#17191d); }

/* Course-specific hero light uses the existing mapped detail accent. */
.course-detail-page .course-detail-hero {
  position:relative; isolation:isolate;
  background-image:radial-gradient(ellipse at 86% 18%,color-mix(in srgb,var(--detail-accent) 15%,transparent),transparent 38%),linear-gradient(120deg,var(--detail-accent-soft),#fff 88%);
}
.course-detail-page .course-detail-hero::before {
  position:absolute; z-index:-1; inset:0; content:""; pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--detail-accent) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--detail-accent) 5%,transparent) 1px,transparent 1px);
  background-size:32px 32px; mask-image:linear-gradient(120deg,transparent 12%,#000 94%);
}
.course-detail-page .course-detail-kicker,
.course-detail-page .course-detail-title span { text-shadow:0 5px 20px color-mix(in srgb,var(--detail-accent) 16%,transparent); }
.course-detail-page .course-detail-visual { transform-style:preserve-3d; }
.course-detail-page .course-outcome { position:relative; padding:19px 14px; border-radius:10px; transition:background-color .18s ease,transform .18s ease; }
.course-detail-page .course-outcome-mark { border-radius:10px 10px 10px 3px; box-shadow:0 7px 16px color-mix(in srgb,var(--detail-accent) 14%,transparent),inset 0 1px #fff; }
.course-detail-page .course-detail-note { border-radius:0 11px 11px 0; box-shadow:0 9px 20px color-mix(in srgb,var(--detail-accent) 8%,transparent),inset 0 1px #fff; }
.course-detail-page .site-header .main-nav a,
.course-detail-page .site-header .nav-actions a { transition:color .18s ease,background-color .18s ease,border-color .18s ease,transform .18s ease; }
.course-detail-page .course-detail-hero .course-detail-action.primary { box-shadow:0 12px 24px color-mix(in srgb,var(--detail-accent) 20%,transparent),inset 0 1px rgba(255,255,255,.4); }

/* Portal surfaces retain their existing light workspace and dark navigation rails. */
.portal-main { background-image:radial-gradient(ellipse at 92% 4%,rgba(116,89,198,.06),transparent 31%),radial-gradient(ellipse at 12% 70%,rgba(244,119,33,.045),transparent 38%); }
.portal-topbar { background:rgba(255,255,255,.9); backdrop-filter:blur(16px); }
.portal-sidebar { background:linear-gradient(170deg,#1d2635 0%,#192130 58%,#222839 100%); }
.portal-brand .brand-mark { box-shadow:inset 0 0 22px #f4772124,0 8px 20px rgba(0,0,0,.18); }
.view-heading h1,.my-learning-heading h1 { text-wrap:balance; }
.overview-panel,.student-assessment-card,.verified-course-progress,.student-announcement-card,
.certificate-lock-card,.notes-empty-state,.revision-dock,.progress-detail-panel,.profile-account,
.purchases-panel,.enrolled-course-card,.catalogue-card {
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
.enrolled-course-art { background-image:radial-gradient(ellipse at 82% 18%,color-mix(in srgb,var(--course-accent) 20%,transparent),transparent 42%),linear-gradient(135deg,color-mix(in srgb,var(--course-accent) 24%,white),color-mix(in srgb,var(--course-tint) 78%,#fff) 66%,#fffaf5); }
.sticky-note { transform-style:preserve-3d; box-shadow:0 15px 28px rgba(71,54,30,.18),0 4px 9px rgba(71,54,30,.08); }

/* Teacher / Admin shell and test workspace use depth without implying enabled actions. */
.workspace-header { background:rgba(255,255,255,.9); backdrop-filter:blur(16px); }
.admin-preview .workspace-header { background:rgba(255,255,255,.88); backdrop-filter:blur(18px); }
.workspace-stat,.workspace-panel,.admin-stat-card,.admin-course-panel,.admin-rail-card,
.admin-theme-lab,.stat-card,.surface,.course-card,.batch-card,.progress-card,.session-card,
.panel,.role-card,.login-card,.register-card { transform-style:preserve-3d; }
.workspace-heading h1,.admin-overview h1 { text-wrap:balance; }
.workspace-notice { box-shadow:0 14px 28px rgba(104,73,44,.08),inset 0 1px rgba(255,255,255,.8); }

/* Authentication screens: premium ivory surfaces with existing charcoal/orange identity. */
.login-page,.auth-page {
  position:relative; isolation:isolate;
  background:radial-gradient(ellipse at 7% 10%,rgba(255,121,0,.09),transparent 30%),radial-gradient(ellipse at 89% 82%,rgba(118,89,213,.08),transparent 32%),#f7f5ef;
}
.login-page::before,.auth-page::before {
  position:absolute; z-index:-1; inset:0; content:""; pointer-events:none;
  background-image:linear-gradient(rgba(43,48,61,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(43,48,61,.028) 1px,transparent 1px);
  background-size:38px 38px; mask-image:radial-gradient(ellipse at 50% 42%,#000,transparent 78%);
}
.login-card,.register-card {
  border:1px solid rgba(255,255,255,.9);
  border-radius:22px 22px 22px 7px;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,252,247,.93));
  box-shadow:0 30px 72px rgba(37,34,29,.13),0 7px 18px rgba(37,34,29,.05),inset 0 1px #fff;
  backdrop-filter:blur(12px);
}
.login-page .topbar,.auth-navbar { background:rgba(255,255,255,.88); backdrop-filter:blur(16px); }
.login-page .intro h1,.register-intro h1 { text-wrap:balance; }
.login-quote,.register-quote {
  position:relative;
  overflow:visible;
  padding:4px 0 4px 18px;
  border:0;
  border-left:2px solid #d86c1c;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.login-quote-text,.register-quote p { color:#5f605d; }
.login-quote-author,.register-quote span { color:#9a4a0b; }
.login-page .topbar .back-btn,.auth-navbar .auth-back { box-shadow:0 6px 16px rgba(37,34,29,.06),inset 0 1px #fff; }
.login-page .login-btn,.auth-page .register-submit {
  box-shadow:0 11px 24px rgba(226,108,16,.21),inset 0 1px rgba(255,255,255,.4);
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}

/* Public study-library page. */
.library-page .topbar { backdrop-filter:blur(14px); }
.library-page .hero-photo { border:1px solid rgba(255,255,255,.3); box-shadow:0 28px 60px rgba(32,39,51,.2),inset 0 1px rgba(255,255,255,.55); transform:perspective(1200px) rotateY(-3deg) rotateX(1deg); }
.library-page .stat,.library-page .facility-card { transform-style:preserve-3d; }
.library-page .facility-card { border-color:rgba(255,255,255,.7); background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(249,247,242,.95)); box-shadow:0 14px 32px rgba(35,39,48,.07),inset 0 1px #fff; }
.library-page .facility-icon { border-radius:13px 13px 13px 4px; box-shadow:0 8px 17px rgba(244,119,33,.13),inset 0 1px #fff; }

/* Pointer-driven perspective tilt and focus-safe scroll reveals. */
[data-fb-tilt="active"] { transform-style:preserve-3d; will-change:transform; }
html.fb-motion-ready [data-fb-reveal="pending"] {
  opacity:0;
  transform:translate3d(0,18px,0) scale(.995);
  transition:opacity .54s ease,transform .62s cubic-bezier(.2,.75,.2,1);
  transition-delay:var(--fb-reveal-delay,0ms);
}
[data-fb-reveal="visible"] { opacity:1; transform:translate3d(0,0,0) scale(1); }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  [data-fb-tilt="active"]:hover {
    transform:perspective(1050px) rotateX(var(--fb-tilt-y,0deg)) rotateY(var(--fb-tilt-x,0deg)) translateY(-4px);
    box-shadow:0 25px 48px color-mix(in srgb,var(--fb-accent,var(--course-accent,var(--detail-accent,#ff7900))) 17%,rgba(29,34,46,.15)),0 7px 14px rgba(29,34,46,.06);
  }
  .course-detail-page .course-outcome:hover { background:color-mix(in srgb,var(--detail-accent-soft) 55%,transparent); transform:translateY(-2px); }
  .library-page .facility-card:hover,.library-page .stat:hover { transform:perspective(900px) rotateX(var(--fb-tilt-y,0deg)) rotateY(var(--fb-tilt-x,0deg)) translateY(-4px); }
  .login-page .login-btn:hover,.auth-page .register-submit:hover { box-shadow:0 16px 30px rgba(226,108,16,.27),inset 0 1px rgba(255,255,255,.5);transform:translateY(-2px); }
}
@keyframes fb-light-drift { 0% { opacity:.7;transform:translate3d(0,0,0) scale(.94); } 100% { opacity:1;transform:translate3d(-24px,18px,0) scale(1.06); } }

@media (max-width:760px) {
  .homepage .hero-section::after { top:14%; right:-84px; width:210px; height:210px; }
  .homepage .final-cta { border-radius:18px 18px 18px 6px; }
}
@media (prefers-reduced-motion:reduce) {
  html.fb-motion-ready [data-fb-reveal="pending"],
  [data-fb-reveal="visible"] { opacity:1; transform:none; transition:none; }
  .homepage .hero-section::after { animation:none; }
  [data-fb-tilt="active"], [data-fb-tilt="active"]:hover { transform:none; }
}