/* YT TUTOR theme styles. Generated from the approved design. */
/* ===== landing ===== */
body{margin:0;font-family:'Inter',system-ui,sans-serif;background:#0D0E11;scroll-behavior:smooth;overflow-x:hidden}
a{text-decoration:none}

/* ---------- keyframes ---------- */
@keyframes rise{from{opacity:0;transform:translateY(46px) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-16px) rotate(var(--r,0deg))}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-40px) scale(1.15)}}
@keyframes grow{0%{transform:scaleY(.12)}60%,100%{transform:scaleY(1)}}
@keyframes ping{0%{transform:scale(1);opacity:.65}100%{transform:scale(2.6);opacity:0}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sweep{0%{left:-60%}60%,100%{left:130%}}
@keyframes fill{0%{width:0}85%,100%{width:100%}}
@keyframes nodeGlow{0%,12%{background:#23252B;color:#A9A7A0;box-shadow:0 0 0 0 rgba(255,107,44,0)}18%,60%{background:#FF6B2C;color:#0D0E11;box-shadow:0 0 0 12px rgba(255,107,44,.18)}100%{background:#FF6B2C;color:#0D0E11;box-shadow:0 0 0 0 rgba(255,107,44,0)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes revealIn{from{opacity:0;transform:translateY(70px) scale(.95)}to{opacity:1;transform:none}}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- hero words ---------- */
.w{display:inline-block;opacity:0;animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * .08s + .15s)}
.fade{opacity:0;animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
.shine-text{background:linear-gradient(90deg,#FF6B2C,#FFC15A,#FF6B2C);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite}
.blob{position:absolute;border-radius:50%;filter:blur(90px);animation:drift 14s ease-in-out infinite;pointer-events:none}
.float{animation:float 6s ease-in-out infinite}
.bar{transform-origin:bottom;animation:grow 3.6s cubic-bezier(.3,.8,.3,1) infinite alternate;animation-delay:var(--b,0s)}
.ping{position:absolute;inset:0;border-radius:50%;background:#FF6B2C;animation:ping 2s ease-out infinite}
.marquee-track{display:flex;gap:16px;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.ring{animation:spin 18s linear infinite}
.pipe-fill{animation:fill 6s ease-in-out infinite}
.node{animation:nodeGlow 6s ease-in-out infinite;animation-delay:var(--n,0s)}
.caret{display:inline-block;width:3px;height:1em;background:#FF6B2C;margin-left:4px;vertical-align:-0.12em;animation:blink 1s steps(1) infinite}

/* ---------- scroll-driven reveals (progressive enhancement) ---------- */
@supports (animation-timeline: view()){
  .reveal{animation:revealIn linear both;animation-timeline:view();animation-range:entry 0% entry 42%}
  .line{transform-origin:left;animation:lineGrow linear both;animation-timeline:view();animation-range:entry 10% entry 70%}
}

/* ---------- interaction ---------- */
.lift{transition:translate .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease,background .3s ease}
.lift:hover{translate:0 -8px;border-color:#FF6B2C !important;box-shadow:0 22px 48px rgba(255,107,44,.2)}
.lift-light:hover{border-color:#0D0E11 !important;box-shadow:0 22px 48px rgba(13,14,17,.16)}
.btn{position:relative;overflow:hidden;transition:translate .2s ease,box-shadow .2s ease,background .2s ease}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sweep 3.4s ease-in-out infinite}
.btn:hover{translate:0 -3px;box-shadow:0 12px 30px rgba(255,107,44,.5);background:#FF8450 !important}
.ghost{transition:background .2s ease,color .2s ease,translate .2s ease}
.ghost:hover{background:#F4F1EA !important;color:#0D0E11 !important;translate:0 -3px}
.navlink{position:relative;transition:color .2s ease}
.navlink::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:#FF6B2C;transition:right .25s ease}
.navlink:hover{color:#FF6B2C !important}
.navlink:hover::after{right:0}
.est-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:#2A2C32;outline:none;margin:12px 0 6px;cursor:pointer}
.est-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#FF6B2C;border:4px solid #0D0E11;box-shadow:0 0 0 2px #FF6B2C;transition:transform .2s ease}
.est-range::-webkit-slider-thumb:hover{transform:scale(1.18)}
.est-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#FF6B2C;border:4px solid #0D0E11;box-shadow:0 0 0 2px #FF6B2C}
.est-range:focus-visible{outline:3px solid #FF6B2C;outline-offset:8px}
.est-out{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-0.03em}
.tab{transition:background .2s ease,color .2s ease,border-color .2s ease,translate .2s ease;cursor:pointer}
.tab:hover{border-color:#FF6B2C !important;translate:0 -3px}
.faq{transition:background .2s ease,border-color .2s ease;cursor:pointer}
.faq:hover{background:#1A1C21 !important;border-color:#3A3C42 !important}
.lesson{transition:padding-left .25s ease,color .25s ease}
.lesson:hover{padding-left:14px !important;color:#FF6B2C !important}
.panel{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
:focus-visible{outline:3px solid #FF6B2C;outline-offset:3px}
.shot{position:relative;display:block;overflow:hidden;border-radius:16px;background:#0D0E11;border:1px solid #2A2C32;height:260px}
.shot img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.shot:hover img{transform:scale(1.07)}
.shot .zoom{position:absolute;right:12px;bottom:12px;background:rgba(13,14,17,.82);color:#F4F1EA;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;opacity:0;translate:0 6px;transition:opacity .25s ease,translate .25s ease}
.shot:hover .zoom,.shot:focus-visible .zoom{opacity:1;translate:0 0}
.lightbox{display:none;position:fixed;inset:0;z-index:9999;background:rgba(5,6,8,.93);align-items:center;justify-content:center;padding:56px 24px 24px;box-sizing:border-box}
.lightbox:target{display:flex;animation:fadeUp .35s ease both}
.lightbox img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lb-close{position:absolute;top:10px;right:20px;color:#F4F1EA;font-size:44px;line-height:1;padding:6px 14px;border-radius:12px;transition:background .2s ease}
.lb-close:hover{background:#23252B}


@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .w,.fade{opacity:1 !important}
  .reveal,.line{opacity:1 !important;transform:none !important}
}

/* ===== login ===== */
body{margin:0;font-family:'Inter',system-ui,sans-serif;background:#0D0E11;overflow-x:hidden}
a{text-decoration:none}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-50px) scale(1.18)}}
@keyframes cardIn{from{opacity:0;transform:translateY(60px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ping{0%{transform:scale(1);opacity:.65}100%{transform:scale(2.6);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sweep{0%{left:-60%}60%,100%{left:130%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.blob{position:absolute;border-radius:50%;filter:blur(90px);animation:drift 14s ease-in-out infinite;pointer-events:none}
.card{animation:cardIn .9s cubic-bezier(.2,.8,.2,1) both}
.fade{opacity:0;animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
.ping{position:absolute;inset:0;border-radius:50%;background:#FF6B2C;animation:ping 2s ease-out infinite}
.ring{animation:spin 20s linear infinite}
.float{animation:float 6s ease-in-out infinite}
.field{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.field:focus{border-color:#FF6B2C !important;box-shadow:0 0 0 4px rgba(255,107,44,.18);outline:none;background:#0D0E11 !important}
.btn{position:relative;overflow:hidden;transition:translate .2s ease,box-shadow .2s ease,background .2s ease}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sweep 3.4s ease-in-out infinite}
.btn:hover{translate:0 -3px;box-shadow:0 12px 30px rgba(255,107,44,.5);background:#FF8450 !important}
.lnk{transition:color .2s ease}
.lnk:hover{color:#FF6B2C !important}
:focus-visible{outline:3px solid #FF6B2C;outline-offset:3px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}.fade{opacity:1 !important}}

/* ===== members ===== */
body{margin:0;font-family:'Inter',system-ui,sans-serif;background:#0D0E11;overflow-x:hidden;scroll-behavior:smooth}
a{text-decoration:none}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-40px) scale(1.15)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes pcardIn{from{opacity:0;transform:translateY(34px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ping{0%{transform:scale(1);opacity:.65}100%{transform:scale(2.6);opacity:0}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes prevealIn{from{opacity:0;transform:translateY(50px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.blob{position:absolute;border-radius:50%;filter:blur(90px);animation:drift 14s ease-in-out infinite;pointer-events:none}
.fade{opacity:0;animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
.shine-text{background:linear-gradient(90deg,#FF6B2C,#FFC15A,#FF6B2C);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite}
.ping{position:absolute;inset:0;border-radius:50%;background:#FF6B2C;animation:ping 2s ease-out infinite}
.pcard{animation:pcardIn .55s cubic-bezier(.2,.8,.2,1) both;transition:translate .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .3s ease}
.pcard:hover{translate:0 -6px;border-color:#FF6B2C !important;box-shadow:0 20px 44px rgba(255,107,44,.18)}
@supports (animation-timeline: view()){.pcard{animation:prevealIn linear both;animation-timeline:view();animation-range:entry 0% entry 38%}}
.chip{transition:background .2s ease,color .2s ease,border-color .2s ease,translate .2s ease;cursor:pointer}
.chip:hover{border-color:#FF6B2C !important;translate:0 -2px}
.copy{transition:background .2s ease,translate .2s ease,box-shadow .2s ease;cursor:pointer}
.copy:hover{translate:0 -2px;box-shadow:0 8px 22px rgba(255,107,44,.4)}
.done{animation:pop .35s ease}
.search{transition:border-color .2s ease,box-shadow .2s ease}
.search:focus{border-color:#FF6B2C !important;box-shadow:0 0 0 4px rgba(255,107,44,.18);outline:none}
.lnk{transition:color .2s ease}
.lnk:hover{color:#FF6B2C !important}
:focus-visible{outline:3px solid #FF6B2C;outline-offset:3px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}.fade,.pcard{opacity:1 !important;transform:none !important}}

/* ====================================================================
   WordPress-specific additions
   ==================================================================== */
[hidden]{display:none !important}
img{max-width:100%;height:auto}

/* shared base for tab and filter chips (state is toggled with .is-on) */
.tab,.chip{font-family:'Inter',system-ui,sans-serif;font-size:16px;font-weight:600;padding:14px 22px;border-radius:999px;border:1.5px solid #3A3C42;background:transparent;color:#F4F1EA;min-height:44px}
.chip{font-size:15px;padding:11px 18px}
.tab.is-on,.chip.is-on{background:#FF6B2C;color:#0D0E11;border-color:#FF6B2C}
.copy.is-done{background:#8FE3A8 !important;animation:pop .35s ease}

/* the vault cards use hidden to filter */
.pcard[hidden]{display:none !important}

/* fallback pages */
.gr-shell{min-height:100vh;background:#0D0E11;color:#F4F1EA;font-family:'Inter',system-ui,sans-serif}
.gr-shell-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1000px;margin:0 auto;padding:22px 24px;box-sizing:border-box}
.gr-brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:23px;color:#F4F1EA;letter-spacing:-0.02em}
.gr-dot{position:relative;width:14px;height:14px;display:inline-block}
.gr-dot-core{position:absolute;inset:0;border-radius:50%;background:#FF6B2C}
.gr-shell .lnk{color:#C9C6BE;font-size:15px;font-weight:500}
.gr-prose{max-width:760px;margin:0 auto;padding:40px 24px 120px;box-sizing:border-box;font-size:18px;line-height:1.7;color:#C9C6BE}
.gr-prose h1,.gr-prose h2,.gr-prose h3{font-family:'Space Grotesk',sans-serif;color:#F4F1EA;letter-spacing:-0.02em;line-height:1.1}
.gr-prose h1{font-size:46px}
.gr-prose a{color:#FF6B2C;text-decoration:underline}

/* WordPress login form restyled to match the design */
.gr-alert{background:rgba(255,107,44,.12);border:1px solid #FF6B2C;color:#FFD2BD;border-radius:14px;padding:14px 16px;font-size:15px;line-height:1.5}
#gr-loginform{display:flex;flex-direction:column;gap:18px;margin:0}
#gr-loginform p{margin:0}
#gr-loginform label{display:block;font-size:14px;font-weight:600;color:#C9C6BE;margin-bottom:8px}
#gr-loginform input[type="text"],
#gr-loginform input[type="password"]{box-sizing:border-box;width:100%;background:#101216;border:1.5px solid #2A2C32;border-radius:14px;padding:15px 16px;font-family:'Inter',sans-serif;font-size:16px;color:#F4F1EA;min-height:48px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
#gr-loginform input[type="text"]:focus,
#gr-loginform input[type="password"]:focus{border-color:#FF6B2C;box-shadow:0 0 0 4px rgba(255,107,44,.18);outline:none;background:#0D0E11}
#gr-loginform .login-remember label{display:flex;align-items:center;gap:10px;font-weight:500;font-size:15px;margin:0;cursor:pointer}
#gr-loginform .login-remember input{width:18px;height:18px;accent-color:#FF6B2C;margin:0}
#gr-loginform #wp-submit{width:100%;background:#FF6B2C;color:#0D0E11;border:none;border-radius:999px;font-family:'Inter',sans-serif;font-weight:600;font-size:17px;padding:17px;cursor:pointer;min-height:52px;transition:translate .2s ease,box-shadow .2s ease,background .2s ease}
#gr-loginform #wp-submit:hover{translate:0 -3px;box-shadow:0 12px 30px rgba(255,107,44,.5);background:#FF8450}

/* keep the admin bar from covering the sticky design for admins */
body.admin-bar .gr-login-page,body.admin-bar .gr-members{scroll-margin-top:32px}